HTML5 canvas transform与矩阵
首先，我们看一下w3school上的例子：
Javascript语法：context.transform( a , b , c , d , e , f );
定义与用法：画布上的每个对象都拥有一个当前的变换矩阵。而transform则是用来定义一个新的矩阵，来替换原来的变换矩阵。
六个参数，对应的矩阵就是：
在这里，我说一下变换矩阵要用到的关于矩阵的知识，一个图形，在画布上无非是移动，缩小放大，还有旋转，斜切，等等。
PS告诉我们，无论多复杂的图形，都是由一个个点组成的，变换矩阵要做的，无非是应用一定的算法，把一个图形上的一个点，映射到另一个点上。
那么，我们就可以得出以下公式：
根据中间那个矩阵的不同，我们就可以得到不同的变换效果。
矩阵乘法是这样定义的：假设有两个矩阵A和B，如果要通过A*B得到C，那么矩阵A的列数必须与矩阵B的行数相同，方才能进行运算。得到的新的矩阵的第 i 行 ，第 j 列的值 就是A的第 i 行 与 B 的第 j 列相对应的值相乘，然后相加的结果。
首先，我们来看看图形在画布上的移动。
算法很简单：
X’ = X + a
Y’ = Y + b
这样就把点(X,Y)移动到了(X’,Y’)。
对应的变换的矩阵就是
X’ 1 0 a X
Y’ 0 1 b * Y
1 0 0 1 1
X’ = 1*X + 0*Y + a*1;
Y’ = 0*X + 1*Y + b*1;
1 = 0*X + 0*Y + 1*1;
那么，对应的JS代码就是context.transform(1,0,0,1,a,b);
再看缩小放大，算法也很简单：
X’ = X*a;
Y’ = Y*b;
Canvas是按照一定的算法来画图的，也就是说，Canvas画出来的图都是矢量图，不会因为放大与缩小而失真，那么，Canvas是如何实现放大与缩小的呢？
其实，无非是对X轴，Y轴乘以各相对应的缩放因子，然后进行路径的描写，填充。
对应的变换矩阵就是：
X’ a 0 0 X
Y’ 0 b 0 Y
1 0 0 1 1
X’ = 1*X + 0 * Y + 0*1;
Y’ = 0*X + b*Y + 0*1;
1 = 0*X + 0*Y + 1*1;
对应的JS代码就是 context.transform(a,0,0,b,0,0);
再看看旋转，算法
通过图可以看出来，B点是通过把A点旋转θ度得来的，即
X’ = cos(a +θ) * r
Y’ = sin(a +θ) * r
根据三角函数公式：cos(α+β)=cosαcosβ-sinαsinβ
可得 X’ = r*cosa*cosθ–r* sina * sinθ= X * cosθ – Y * sinθ;
同理可得 Y’ = x*sinθ+y*cosθ;
X’ cosθ -sinθ 0 X
Y’ sinθ cosθ 0 Y
1 0 0 1 1
对应的JS代码就是 context.transform(Math.cos(θ * Math.PI/180) , Math.sin(θ*Math.PI/180) , - Math.sin(θ*Math.PI/180) , Math.cos(θ * Math.PI/180) , 0 , 0 );
矩阵的好处就是用6个参数就可以表达出不同的算法来，虽然麻烦了点，但这样做是值得的。
以此类推，斜切也是一样的，只是算法要复杂一些。
记住，在canvas中先确定坐标系，再画图，其实，平移，放大缩小，斜切，旋转，都是针对坐标系的，应用不同的坐标系，就可以画出不同的图形来。