html5_canvas属性方法(下)
2012-11-28 19:12
330 查看
五、图片!!!!!!!!!!!!!!!!!!!!!!!
canvas的绘图上下文中定义了几种绘制图片的方法:
1、drawIamge(image,dx,dy)接受一个图片,并将之画到canvaa中。给出的坐标(dx,dy)代表图片的左上角。比如,坐标(0,0)将把图片画到canvas的左上角。
2、drawIamge(image,dx,dy,dw,dh)接受一个图片,将其缩放为宽度dw和高度dh,然后把它画到canvas上的(dx,dy)位置。
3、drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh)接受一个图片,通过参数(sx,sy,sw,sh)指定图片裁剪的范围,缩放到(dw,dh)的大小,最后把它画到canvas上的(dx,dy)位置。
要在canvas上绘制图像,需要一先有一个图片。这个图片可以是已经存在的<img>元素,或者通过JS创建。无论采用哪种方式,都需要在绘制canvas之前,完全加载这张图片。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。
六、渐变
渐变是指在颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤:
(1)创建渐变对象
(2)为渐变对象设置颜色,指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
要设置显示哪种颜色,在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数:颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值,代表沿着渐变线渐变的距离有多远。
除了可以变换成其他颜色外,还可以为颜色设置alpha值(例如透明),并且alpha值也是可以变化的。为了达到这样的效果,需要使用颜色值的另一种表示方法,例如内置alpha组件的CSSrgba函数.
除了线性渐变以外,HTML5 Canvas API还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的:参数如下:
createRadialGradient(x0,y0,r0,x1,y1,r1)
代码中,前三个参数代表以(x0,y0)为圆心,r0为半径,后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆。渐变会在两个圆中间的区域出现。
七、背景图
直接绘制图像有很多用处,但在某些情况下,像CSS那样使用图片作为背景也非常有用。HTML5 Canvas
API还支持图片平铺。调用createPattern函数。
八、绘制曲线(二次曲线)
quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数,第二组是指曲线的终点。第一组代表控制点。所谓控制点位于曲线的旁边(不是曲线之上),其作用相当于对曲线产生一个拉力。通过调整控制点的位置,就可以改变曲线的曲率。
HTML5 Canvas API的其他曲线功能还涉及bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点(如半径、角度等)让曲线更具可塑性。
九、缩放canvas对象
scale(x,y),这个函数带有两个参数来分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候,向其传递在本方向轴上图像要放大(或者缩小)的量。如果x值为2,就代表所绘制图像中全部元素都会变成两倍宽。如果y值为0.5,绘制出来的图像全部元素都会变成之前的一半高。
注:要在原点执行图形和路径的变换操作,执行完成以后再统一平移。理由是绽放(scale)和旋转(rotate)等变换操作都是针对原点进行的。如果对一个人不在原点的图形进行旋转变换,那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。与之类似,如果进行缩放操作时没有将放置到合适的坐标上,那么所有路径坐标都会被同时缩放。取决于缩放比例的大小,新的坐标可能会全部超出canvas范围,进而给开发人员带来困惑,为什么我的缩放操作会把图像删了?
十、变换
变换操作并不限于缩放和平移,我们可以使用函数context.rotate(angle)来旋转图像,甚至可以直接修改底层变换矩阵以完成一些高级操作,如剪裁图像的绘制路径。如:context.rotate(1.57),旋转角度参数以弧度为单位。
beginPath():开始
moveTo(x,y):起点坐标
lineTo(x,y):目标坐标
closePath():连接起点,闭合路径
translate():移动
rotate():旋转
restore():恢复
scale():缩放
save():保存
rotate(angle):旋转图像
quadraticCurveTo():绘制曲线
stroke():绘制
strokeText():描绘文本轮廓
strokeStyle():颜色设置
strokeRect():使用当前的storkestyle来绘制一个矩形,而只绘制矩形的边缘。
fill:填充
fillRect():绘制一个矩形,并以当前的fillStyle来填充
fillStyle():样式填充
fillText:填充文本内容
drawIamge():图片填充
createPattern():使用背景图片填充
addColorStop():渐变填充
createRadialGradient():放射性渐变
clearRect():清除指定矩形区域的像素
.lineCap(butt | square | round):指定线条末端的样式
.fillStyle:设置为CSS颜色、一个图案或一种颜色渐变
.lineWidth:线条宽度设置
.lineJoin(round):修改当前形状中线段的连接方式,让拐角变得更圆滑
.shadowColor:任何css中的颜色值,可以使用透明度(alpha)
.shadowOffsetX:像素值,值为正数,向右移动阴影;值为负数,向左移动阴影
.shadowOffsetY:像素值,值为正数,向下移动阴影;值为负数,向上移动阴影
.shadowBlur:高斯模糊值,值越大,阴影越模糊
CanvasRenderingContext2D
对象的方法
canvas的绘图上下文中定义了几种绘制图片的方法:
1、drawIamge(image,dx,dy)接受一个图片,并将之画到canvaa中。给出的坐标(dx,dy)代表图片的左上角。比如,坐标(0,0)将把图片画到canvas的左上角。
2、drawIamge(image,dx,dy,dw,dh)接受一个图片,将其缩放为宽度dw和高度dh,然后把它画到canvas上的(dx,dy)位置。
3、drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh)接受一个图片,通过参数(sx,sy,sw,sh)指定图片裁剪的范围,缩放到(dw,dh)的大小,最后把它画到canvas上的(dx,dy)位置。
要在canvas上绘制图像,需要一先有一个图片。这个图片可以是已经存在的<img>元素,或者通过JS创建。无论采用哪种方式,都需要在绘制canvas之前,完全加载这张图片。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。
六、渐变
渐变是指在颜色集上使用逐步抽样算法,并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤:
(1)创建渐变对象
(2)为渐变对象设置颜色,指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
要设置显示哪种颜色,在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数:颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值,代表沿着渐变线渐变的距离有多远。
除了可以变换成其他颜色外,还可以为颜色设置alpha值(例如透明),并且alpha值也是可以变化的。为了达到这样的效果,需要使用颜色值的另一种表示方法,例如内置alpha组件的CSSrgba函数.
除了线性渐变以外,HTML5 Canvas API还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的:参数如下:
createRadialGradient(x0,y0,r0,x1,y1,r1)
代码中,前三个参数代表以(x0,y0)为圆心,r0为半径,后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆。渐变会在两个圆中间的区域出现。
七、背景图
直接绘制图像有很多用处,但在某些情况下,像CSS那样使用图片作为背景也非常有用。HTML5 Canvas
API还支持图片平铺。调用createPattern函数。
八、绘制曲线(二次曲线)
quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数,第二组是指曲线的终点。第一组代表控制点。所谓控制点位于曲线的旁边(不是曲线之上),其作用相当于对曲线产生一个拉力。通过调整控制点的位置,就可以改变曲线的曲率。
HTML5 Canvas API的其他曲线功能还涉及bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点(如半径、角度等)让曲线更具可塑性。
九、缩放canvas对象
scale(x,y),这个函数带有两个参数来分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候,向其传递在本方向轴上图像要放大(或者缩小)的量。如果x值为2,就代表所绘制图像中全部元素都会变成两倍宽。如果y值为0.5,绘制出来的图像全部元素都会变成之前的一半高。
注:要在原点执行图形和路径的变换操作,执行完成以后再统一平移。理由是绽放(scale)和旋转(rotate)等变换操作都是针对原点进行的。如果对一个人不在原点的图形进行旋转变换,那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。与之类似,如果进行缩放操作时没有将放置到合适的坐标上,那么所有路径坐标都会被同时缩放。取决于缩放比例的大小,新的坐标可能会全部超出canvas范围,进而给开发人员带来困惑,为什么我的缩放操作会把图像删了?
十、变换
变换操作并不限于缩放和平移,我们可以使用函数context.rotate(angle)来旋转图像,甚至可以直接修改底层变换矩阵以完成一些高级操作,如剪裁图像的绘制路径。如:context.rotate(1.57),旋转角度参数以弧度为单位。
beginPath():开始
moveTo(x,y):起点坐标
lineTo(x,y):目标坐标
closePath():连接起点,闭合路径
translate():移动
rotate():旋转
restore():恢复
scale():缩放
save():保存
rotate(angle):旋转图像
quadraticCurveTo():绘制曲线
stroke():绘制
strokeText():描绘文本轮廓
strokeStyle():颜色设置
strokeRect():使用当前的storkestyle来绘制一个矩形,而只绘制矩形的边缘。
fill:填充
fillRect():绘制一个矩形,并以当前的fillStyle来填充
fillStyle():样式填充
fillText:填充文本内容
drawIamge():图片填充
createPattern():使用背景图片填充
addColorStop():渐变填充
createRadialGradient():放射性渐变
clearRect():清除指定矩形区域的像素
.lineCap(butt | square | round):指定线条末端的样式
.fillStyle:设置为CSS颜色、一个图案或一种颜色渐变
.lineWidth:线条宽度设置
.lineJoin(round):修改当前形状中线段的连接方式,让拐角变得更圆滑
.shadowColor:任何css中的颜色值,可以使用透明度(alpha)
.shadowOffsetX:像素值,值为正数,向右移动阴影;值为负数,向左移动阴影
.shadowOffsetY:像素值,值为正数,向下移动阴影;值为负数,向上移动阴影
.shadowBlur:高斯模糊值,值越大,阴影越模糊
CanvasRenderingContext2D
对象的方法
方法 | 描述 |
arc() | 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。 |
arcTo() | 使用目标点和一个半径,为当前的子路径添加一条弧线。 |
beginPath() | 开始一个画布中的一条新路径(或者子路径的一个集合)。 |
bezierCurveTo() | 为当前的子路径添加一个三次贝塞尔曲线。 |
clearRect() | 在一个画布的一个矩形区域中清除掉像素。 |
clip() | 使用当前路径作为连续绘制操作的剪切区域。 |
closePath() | 如果当前子路径是打开的,就关闭它。 |
createLinearGradient() | 返回代表线性颜色渐变的一个 CanvasGradient 对象。 |
createPattern() | 返回代表贴图图像的一个 CanvasPattern 对象。 |
createRadialGradient() | 返回代表放射颜色渐变的一个 CanvasGradient 对象。 |
drawImage() | 绘制一幅图像。 |
fill() | 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 |
fillRect() | 绘制或填充一个矩形。 |
lineTo() | 为当前的子路径添加一条直线线段。 |
moveTo() | 设置当前位置并开始一条新的子路径。 |
quadraticCurveTo() | 为当前路径添加一条贝塞尔曲线。 |
rect() | 为当前路径添加一条矩形子路径。 |
restore() | 为画布重置为最近保存的图像状态。 |
rotate() | 旋转画布。 |
save() | 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 |
scale() | 标注画布的用户坐标系统。 |
stroke() | 沿着当前路径绘制或画一条直线。 |
strokeRect() | 绘制(但不填充)一个矩形。 |
translate() | 转换画布的用户坐标系统。 |
相关文章推荐
- HTML5_Canvas_属性、定义及方法
- HTML5_Canvas_属性、定义及方法
- html5 canvas中的属性和方法详解
- HTML5_Canvas_属性、定义及方法
- 整理的HTML5 CANVAS 定义、属性和方法
- 11-26 {精心收集} 之 HTML5_Canvas_属性、定义及方法
- HTML5之CANVAS 属性和方法的示例汇总
- HTML5_Canvas_属性、定义及方法(学习笔记)
- HTML5 Canvas 绘图方法整理 【十八、Canvas动画/ requestAnimationFrame() 兼容】
- HTML5的Video标签的属性,方法和事件汇总
- html5 中的 canvas 绘制椭圆的方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- HTML5中的data-*属性和jQuery中的.data()方法使用
- HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- HTML5 Canvas 开发 绘图方法整理 【五、canvas text / 文本、文字相关】
- HTML5 Canvas 开发 绘图方法整理 【十、Canvas渐变、图形渐变&&文字渐变】
- JavaScript html5 canvas画布中删除一个块区域的方法
- Canvas 属性,方法