canvas transform 使用 详解
图形的矩阵变换，其实就是图形中每个点的变换
Canvas的transform(a,b,c,d,e,f)方法 和Matrix(矩阵)的对应关系
_ _
| a c e |
| b d f |
|_ 0 0 1 _|
Matrix和点（x,y）的对应关系
x 对应第一行，y对应第二行
点（x,y）经过矩阵变换后的结果
x' = ax + cy + e;
y' = bx + dy + f;
一个图形初始的Matrix(矩阵) 如下：
_ _
| 1 0 0 |
| 0 1 0 |
|_ 0 0 1 _|
因为每个点 还是它本身
x' = 1*x + 0*y + 0 = x;
y' = 0*x + 1*y + 0 = y;
现在进行矩阵的变换：
平移：translate 其实就是对 e和f的变换， e 代表x的平移量，f代表y的平移量
transform(1, 0, 0, 1, 10, 20) = translate(10, 20),x平移10，y平移20
_ _
| 1 0 10 |
| 0 1 20 |
|_ 0 0 1 _|
缩放:scale 就是对a 和 d 的变换， a代表x的缩放量，d代表y的缩放量
transform(2, 0, 0, 0.5, 0, 0) = scale(2, 0.5), x放大一倍，y缩小一倍
_ _
| 2 0 0 |
| 0 0.5 0 |
|_ 0 0 1 _|
旋转：rotate，涉及到a，b，c，d四个变量，
transform(cosθ, sinθ, -sinθ, cosθ，0, 0) = rotate(θ), θ是旋转的角度
_ _
| cosθ -sinθ 0 |
| sinθ cosθ 0 |
|_ 0 0 1 _|
拉伸：skew，涉及到 b 和 c两个变量
transform(1, tanθy, tanθx, 1, 0, 0) = rotate(θ), θy是y轴的倾斜角度，θx是x轴的倾斜角度,此时的a，b应该为1，
ctx.transform(1,Math.tan(Math.PI/180*30),0,1,0,0)
斜切30度,那么就必须用tan把30度包起来,x/y轴都是如此.
_ _
| 1 tanθ 0 |
| tanθ 1 0 |
|_ 0 0 1 _|
更多的复杂变换，需要计算出相应的Matrix,并赋给transform就行。
如：镜像，任意对称轴都可以用y = k * x表示
matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)
那么已知对称轴和(x, y),求对称点(x', y')
很简单，一是垂直，二是中心点在轴线上，因此有：
(y-y') / (x - x') = -1/ k → ky-ky' = -x+x'(x + x') / 2 * k = (y + y')/2 → kx+kx' = y+y'
很简单的，把x'和y'提出来，就有：
x' = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y;y' = 2k/(k*k+1) *x + (k*k-1)/(k*k+1) *y;
再结合矩阵公式：x' = ax+cy+e;y' = bx+dy+f;
我们就可以得到：a = (1-k*k)/(k*k+1);b = 2k/(k*k+1);c = 2k/(k*k+1);d = (k*k-1)/(k*k+1);
也就是上面matrix方法中的参数值啦！