Html5 Canvas 变换矩阵与坐标变形之间的关系

Html5 Canvas变形本质其实就是矩阵变换transform。坐标变形的三种方式，平移translate, 缩放scale以及旋转rotate都可以通过transform做到。

现在我们先来看看矩阵变换的定义：

Context.transform(m11,m12,m21,m22,dx,dy);

该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算，该变换矩阵的形式如下：

m11	m21	dx
m12	m22	dy
0	0	1

也就是说假设A（x,y）要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。

一．平移context.translate(dx,dy)：

如上图所示：

x’=x+dx

y’=y+dy

也即是：

 也即是说可以使用

context.transform (1,0,0,1,dx,dy) 代替 context.translate(dx,dy)。

二．缩放context.scale(s_x, s_y)：

缩放我直接用公式来解释：

x’=s_x*x

y’=s_y*y

(其中，s_x 和s_y分别表示在x轴和y轴上的缩放倍数)

可以得到：

也即是说可以使用

context.transform(s_x,0,0,s_y,0,0)代替context.scale(s_x, s_y);

也可以使用context.transform (0,s_y,s_x,0, 0,0);

三．旋转context.rotate(θ)：

如上图图所示：

B点是通过A点逆时针旋转θ得到

x=r*cosa

y=r*sina

即

x’=r*cos(a+θ)=x*cosθ-y*sinθ

y’=r*sin(a+θ)=x*sinθ+y*cosθ

PS：两角和、差公式

  sin(A+B) = sinAcosB+cosAsinB 
  sin(A-B) = sinAcosB-cosAsinB 
  cos(A+B) = cosAcosB-sinAsinB 
  cos(A-B) = cosAcosB+sinAsinB 
  tan(A+B) = (tanA+tanB)/(1-tanAtanB) 
  tan(A-B) = (tanA-tanB)/(1+tanAtanB) 
  cot(A+B) = (cotAcotB-1)/(cotB+cotA) 
  cot(A-B) = (cotAcotB+1)/(cotB-cotA)

也即是

也即是说可以用

context.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(θ)。