参考文档链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#13
1.context是一个封装了很多绘图功能的对象，获取这个对象的方法是（不提供3d服务） ：
var context =canvas.getContext("2d");canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充 context.stroke()//绘制边框style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式 context.strokeStyle//边框样式 context.lineWidth//图形边框宽度 颜色的表示方式: 直接用颜色名称:"red" "green" "blue" 十六进制颜色值: "#EEEEFF" rgb(1-255,1-255,1-255)rgba(1-255,1-255,1-255,透明度)
2.canvas提供了三种方法绘制矩形：
1）CanvasRenderingContext2D.fillRect() 是Canvas 2D API 绘制填充矩形的方法。矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle 属性决定矩形的样式。即：
context.fillRect(x,y,width,height) //绘制一个填充的矩形2）CanvasRenderingContext2D.strokeRect() 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 width 、高度为 height 的矩形的方法。即：
context.strokeRect(x,y,width,height)//绘制一个矩形的边框3）CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。即：
context.clearRect(x,y,width,height)//清除指定矩形区域，让清除部分完全透明3.绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。首先，你需要创建路径起始点。然后你使用画图命令去画出路径。之后你把路径封闭。一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数： 1)beginPath()//新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 2)closePath()//闭合路径之后图形绘制命令又重新指向到上下文中。 3)stroke()//通过线条来绘制图形轮廓。
4)fill()//通过填充路径的内容区域生成实心的图形。
当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
4.当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。即：
context.moveTo(x, y)//将笔触移动到指定的坐标x以及y上5.绘制直线，需要用到的方法lineTo()。该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等...。开始点也可以通过moveTo()函数改变。即：
context.lineTo(x, y)//绘制一条从当前位置到指定x以及y位置的直线6.绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)//画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
7.一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。即：
context.quadraticCurveTo(cp1x, cp1y, x, y)//绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点 context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)//绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点8.Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
new Path2D(); // 空的Path对象 new Path2D(path); // 克隆Path对象 new Path2D(d); // 从SVG建立Path对象所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。比如：
Path2D.addPath(path [, transform])//添加了一条路径到当前路径（可能添加了一个变换矩阵）9.线型 Line styles。可以通过一系列属性来设置线的样式。
1)CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。
context.lineCap = "butt";//线段末端以方形结束 context.lineCap = "round";//线段末端以圆形结束 context.lineCap = "square";//线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域2) CanvasRenderingContext2D.lineWidth 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。当获取属性值时，它可以返回当前的值（默认值是1.0 ）。 当给属性赋值时， 0、 负数、 Infinity 和 NaN 都会被忽略；除此之外，都会被赋予一个新值。
context.lineWidth = value;//设置线条宽度。value描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。3)CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
context.lineJoin = type;//设定线条与线条间接合处的样式此属性有3个值： round, bevel and miter。默认值是 miter。注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果，因为在那种情况下不会出现连接区域。而（1）round。即：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。（2）bevel。即：在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。（3）miter。即：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
4） CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。 当获取属性值时， 会返回当前的值（默认值是10.0 ）。当给属性赋值时， 0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。
context.miterLimit = value;//限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度 5)CanvasRenderingContext2D.getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。 context.getLineDash();//返回一个包含当前虚线样式，长度为非负偶数的数组返回值如果数组元素的数量是奇数，数组元素会被复制并重复。
6）CanvasRenderingContext2D.setLineDash() 是 Canvas 2D API 设置虚线样式的方法。
contex.setLineDash(segments);//设置当前虚线样式segments是一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。
7）CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性。
contex.lineDashOffset = value;//设置虚线样式的起始偏移量。value是偏移量是float精度的数字。 初始值为 0.0。10.渐变 Gradients
就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。
context.createLinearGradient(x1, y1, x2, y2);// 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2) context.createRadialGradient(x1, y1, r1, x2, y2, r2);// 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆 var lineargradient = contex.createLinearGradient(0,0,150,150); var radialgradient = contex.createRadialGradient(75,75,0,75,75,100); //创建出 canvasGradient 对象后，我们就可以用 addColorStop 方法给它上色了。 gradient.addColorStop(position, color);// 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。11.阴影 Shadows
1）shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
2）shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
3）shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
4）shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
12. canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。 引入图像到canvas里需要以下两步基本操作： （1）获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片；
（2）使用drawImage()函数将图片绘制到画布上。
1）绘图 context.drawImage
context.drawImage(image,x,y);其中：image:Image对象var img=new Image(); img.src="url(...)";x:绘制图像的x坐标；y:绘制图像的y坐标。
context.drawImage(image,x,y,w,h);其中：image:Image对象var img=new Image(); img.src="url(...)"；x:绘制图像的x坐标；y:绘制图像的y坐标；w:绘制图像的宽度；h:绘制图像的高度。
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//选取图像的一部分矩形区域进行绘制其中：image:Image对象var img=new Image(); img.src="url(...)"；sx：图像上的x坐标；sy：图像上的y坐标；sw：矩形区域的宽度；sh：矩形区域的高度；dx：画在canvas的x坐标；dy：画在canvas的y坐标；dw：画出来的宽度；dh：画出来的高度。
2）图像平铺
context.createPattern(image,type);其中：image同上；而type可选值为:no-repeat:不平铺；repeat-x:横方向平铺；repeat-y:纵方向平铺；repeat:全方向平铺。
3）图像裁剪
context.clip();只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候先创建裁剪区域，再绘制图像。
4）获取像素颜色数组
var imagedata=context.getImageData(sx,sy,sw,sh)其中：sx:cavas的x轴坐标点；sy:canvas的y轴坐标点；sw:距离x的宽度；sh:距离y的高度。
可以利用context.getImageData返回的一个像素颜色数组，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba[r1,g1,b1,a1,r2,g2,b2,a2...]。
5）设置像素颜色
context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制。其中：imagedata:修改后的imagedata；dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）；dy:重绘图像的起点纵坐标； //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedatadirtyX:矩形左上角x轴坐标；dirtyY:矩形左上角y轴坐标；dirtyWidth:矩形长度；dirtyHeight:矩形高度 。
13.保存和恢复状态
context.save();//保存。调用该方法，会保存当前context的状态、属性（把他理解成游戏存档） context.restore();//恢复。调用该方法就能恢复到save时候context的状态、属性（游戏回档）在上面的裁剪图片提过，一旦设定了裁剪区域，后来绘制的图形都只显示裁剪区域内的内容，要“取消”这个裁剪区域才能正常绘制其他图形，其实这个“取消”是利用save（）方法和restore（）方法来实现的。
14.几个重要操作：
1）移动，即translate方法，它用来移动 canvas 和它的原点到一个不同的位置。
context.translate(x, y) 其中： x 是左右偏移量，y 是上下偏移量2）旋转，即rotate 方法，它用于以原点为中心旋转 canvas。
context.rotate(angle)旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。
3）缩放，即用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
context.scale(x, y) x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
4）变形。允许对变形矩阵直接修改。
context.transform(m11, m12, m21, m22, dx, dy)这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵。函数的参数各自代表为：m11：水平方向的缩放；m12：水平方向的倾斜偏移；m21：竖直方向的倾斜偏移；m22：竖直方向的缩放；dx：水平方向的移动；dy：竖直方向的移动。
context.setTransform(m11, m12, m21, m22, dx, dy)这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。
context.resetTransform() 重置当前变形为单位矩阵，它和调用以下语句是一样的：contex.setTransform(1, 0, 0, 1, 0, 0);