坐标变换
在Canvas中，变形包括移动、旋转、缩放、变形，跟CSS3中的2D转换类似。
（注意：原有内容不会受变形的影响，变形只是坐标变换，新绘制的图形就是在变换后的坐标轴里绘制的。）
下面我们来逐一的认识。
一、移动（translate）
canvas的移动是指移动 canvas 和它的原点到一个不同的位置。
translate(x, y)
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。
实例：canvas-demo/translate.html：
cxt.fillRect(0,0,100,100);
cxt.save();
cxt.translate(60,60);
cxt.fillStyle="red";
cxt.fillRect(0,0,100,100);
cxt.restore();
二、旋转（rotate）
用于以原点为中心旋转 canvas。
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
实例：canvas-demo/tranform-rotate.html：
cxt.beginPath();
cxt.moveTo(0,50);
cxt.lineTo(100,50);
cxt.stroke();
cxt.save();
cxt.rotate(Math.PI/12);
cxt.strokeStyle="red";
cxt.beginPath();
cxt.moveTo(0,50);
cxt.lineTo(100,50);
cxt.stroke();
cxt.restore();
三、缩放（scale）
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
实例：canvas-demo/scale.html：
cxt.fillRect(20,20,50,50);
cxt.save();
cxt.scale(.5,.5);
cxt.fillStyle="red";
cxt.fillRect(20,20,50,50);
四、变形
区别： transform()方法的行为相对于由 rotate(),scale(), translate(), or transform() 完成的其他变换。例如：如果我们已经将绘图设置为放到两倍，则 transform() 方法会把绘图放大两倍，那么我们的绘图最终将放大四倍。这一点和之前的变换是一样的。 但是setTransform()不会相对于其他变换来发生行为。它的参数也是六个，context.setTransform(a,b,c,d,e,f)，与transform()一样。
transform(m11, m12, m21, m22, dx, dy)
参数：
m11 水平缩放绘图。 默认值1
m12 水平倾斜绘图。 默认值0
m21 垂直倾斜绘图。 默认值0
m22 垂直缩放绘图。 默认值1
dx 水平移动绘图。 默认值0
dy 垂直移动绘图。 默认值0
这个方法必须将当前的变形矩阵乘上下面的矩阵：
m11 m21 dx
m12 m22 dy
0 0 1
注意：该变换只会影响 transform() 方法调用之后的绘图。
setTransform(m11, m12, m21, m22, dx, dy)
参数： m11 水平缩放绘图。 默认值1 m12 水平倾斜绘图。 默认值0 m21 垂直倾斜绘图。 默认值0 m22 垂直缩放绘图。 默认值1 dx 水平移动绘图。 默认值0 dy 垂直移动绘图。 默认值0
五、transform和translate、scale、rotate
5.1 translate
cxt.translate(dx,dy)
cxt.transform (1,0,0,1,dx,dy)代替cxt.translate(dx,dy)。 也可以使用 cxt.transform(0,1,1,0.dx,dy)代替。
5.2 scale
cxt.scale(m11, m22)：
也即是说可以使用 cxt.transform(m11,0,0,m22,0,0)代替cxt.scale(m11,m22); 也可以使用cxt.transform (0,m22,m11,0, 0,0);
5.3 rotate
rotate(θ)
也即是说可以用
cxt.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180)Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）可以替代context.rotate(θ)。也可以使用 cxt.transform(-Math.sin(θMath.PI/180),Math.cos(θMath.PI/180)， Math.cos(θMath.PI/180)，Math.sin(θMath.PI/180), 0，0）替代。