Canvas是HTML5新增的专门用来绘制图形的元素，是基于像素的绘图，相当于画板的html节点。事实上，canvas元素只是一块无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。接下来将主要学习Canvas的渲染上下文、坐标系统、画布状态、变形合成以及高级图像和视频处理技巧。
<canvasid="myCanvas" style="border:1px solid;"width="200" height="100"/>
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方法输出的是填充颜色。
绘制圆形：
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
beginPath()方法用于开始绘制路径
closePath()方法用于结束绘制路径
arc()方法用于绘制圆形，其用法如下
x,y为起点坐标
radius为圆形半径
startAngle为开始的角度
endAngle为结束的角度
anticlockwise为是否按顺时针方向进行绘制
绘制三角形：
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx[type + 'Style'] = color;
ctx.closePath()；
ctx[type]();
x1(2、3),y1(2、3)-
三角形的三个点的坐标；color-绘制颜色；type-绘制类型（'fill'和'stroke'）
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属性无效。
线性渐变------需要使用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); //改变图形大小
context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);//创建图片切片，
其中sx、sy为源图像被切割区域的起始坐标，
sw、sh为源图像被切下来的宽度和高度，
dx、dy为被切割下来的源图像要放置到目标canvas的起始坐标，
dw、dh为被切割下来的原图像放置到目标canvas并显示的高度和宽度。