Html 5 Canvas変換行列と座標変形の関係

Html 5 Canvas変形の本質はマトリクス変換transformである.座標変形の3つの方法は、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(sx, sy):
スケールは数式で直接説明します.
x’=sx*x
y’=sy*y
(ここで、sxおよびsyは、それぞれx軸およびy軸におけるスケーリング倍数を表す)
入手可能:
つまり使える
context.transform(sx,0,0,sy,0,0)はcontextに代わる.scale(sx, sy);
contextを用いることもできる.transform (0,sy,sx,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(θ).