HTML5画布

HTML5画布

Canvas是HTML5新增的专门用来绘制图形的元素，是基于像素的绘图，相当于画板的html节点。事实上，canvas元素只是一块无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。接下来将主要学习Canvas的渲染上下文、坐标系统、画布状态、变形合成以及高级图像和视频处理技巧。

<canvasid="myCanvas" style="border:1px solid;"width="200" height="100"/>

使用JavaScript可以在canvas元素内部添加线条、图片和文字，还能加入高级动画。

fillRect(50,25,100,50)中的前两个参数用于指定位置的x轴和y轴的坐标值，在Canvas中，坐标原点（0,0）位于Canvas的左上角，x轴水平向右延伸，y轴垂直向下延伸。

moveTo方法用于建立新的子路径，并规定其起始点为（x，y），用法如下：context.moveTo(x,y)

绘制矩形有两种方法，fillRect和strokeRect，前者用于绘制用颜色填充区域的矩形，后者用于绘制轮廓（或线条），而为图形指定颜色用到的两个属性是fillStyle和strokeStyle。stroke方法用于在显示设备中输出线条，fill方法输出的是填充颜色。

绘制圆形：采用绘制路径并填充颜色的方法，beginPath方法用于开始绘制路径，closePath方法用于结束绘制路径，arc方法用于绘制圆形，其用法如下：context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

x,y为起点坐标，radius为圆形半径，startAngle为开始的角度，endAngle为结束的角度，anticlockwise为是否按顺时针方向进行绘制。

绘制三角形：综合运用上述的一些方法和属性，使用绘制路径的方法可以自由绘制其他形状。

使用clearRect方法可清除指定的矩形区域内的所有图形，显示出画布的背景，用法如下：

Context.clearRect(x,y,width,height);

quadraticCurveTo方法用于绘制二次方贝塞尔曲线，其用法如下：

context.quadraticCurveTo(cp1x,cp 1y,x,y);

参数cp 1x和cp 1y是控制点的坐标，x和y是终点坐标。

bezierCurveTo方法用于绘制三次方贝塞尔曲线，其用法如下：

context.bezierCurveTo(cp1x,cp 1y,cp2x,cp2y,x,y);

参数cp 1x和cp 1y是第一个控制点的坐标，cp2x和cp2y是第二个控制点的坐标，x和y是终点坐标。

save和restore方法用于保存和恢复Canvas状态，这两个方法都不需要任何参数。

translate方法用于移动坐标空间，使画布的变换矩阵发生水平和垂直方向的偏移，用法如下：

context.translate(dx,dy);

dx和dy分别为坐标原点沿水平和垂直两个方向的偏移量。

rotate方法用于以原点为中心旋转Canvas，实质仍是旋转Canvas上下文对象的坐标空间，用法为context.rotate(angle);angle为旋转角度。

scale方法用于增减Canvas上下文对象中的像素数目，从而实现图形或位图的放大或缩小，用法如下：context.scale(x,y);x为横轴的缩放因子，y轴为纵轴的缩放因子，它们的值必须为正值。值小于1为缩小图形，值大于1为放大图形。

transform方法用于直接对变形矩阵作修改，即进行矩阵变换。用法如下：

context.transform(m11,m12,m21,m22,dx,dy);

dx为原点沿x轴移动的数值，dy为原点沿y轴移动的数值。m11、m22或m12、m21为沿x、y轴放大的倍数。

globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式，指定为source-over，即默认设置，新的图形会覆盖在原有图形之上，也可以指定其他值。globalCompositeOperation语句的位置应处在原有内容与新图形之间。

clip方法用于裁切路径，作用是形成一个蒙版，没有被蒙版的区域会隐藏。

lineWidth设置线条的粗细，值必须为正数，默认值为1.0；

lineCap设置端点样式，属性值包括以下三种：butt，round和square，默认值为butt。

lineJoin设置连接处样式，属性值包含以下三种：round、bevel和miter，默认值为miter。

miterLimit设置绘制交点的方式，当lineJoin属性值设置为miter时，miterLimit属性的作用是为斜面的长度设置一个上限，默认为10，即规定斜面的长度不能超过萧条宽度的10倍。如果lineJoin属性值为round或bevel时，miterLimit属性无效。

在Canvas中如果要绘制线性渐变，首先需要使用createLinearGradient方法创建canvasGradient对象，然后使用addColorStop方法进行上色。

如果要绘制径向渐变，则首先需要使用createRadialGradient方法创建canvasGradient对象，然后使用addColorStop方法进行上色。

createPattern方法用来实现图案效果。

rgba方法可以设置具有透明度的颜色，用法如下rgba(R,G,B,A);R、G、B、为红绿蓝，A把alpha成分指定为0~1的一个浮点数值。

绘制文字使用的是fillText方法和strokeText方法，分别用于以填充方式和轮廓方法绘制文字。使用measureText方法可以测量当前所绘制文字中指定文字的宽度。

drawImage方法有以下三种用法：

context.drawImage(image,x,y); //引入image对象

context.drawImage(image,x,y,width,height); //改变图形大小，其中width和height分别是图像在canvas中显示的宽度和高度

context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);//创建图片切片，其中sx、sy为源图像被切割区域的起始坐标，sw、sh为源图像被切下来的宽度和高度，dx、dy为被切割下来的源图像要放置到目标canvas的起始坐标，dw、dh为被切割下来的原图像放置到目标canvas并显示的高度和宽度。