transformの行列 - 滴了庵日録

HTML5のCanvasのtransformメソッドの6つの引数は、アフィン変換行列を表す。

context.transform(a,b,c,d,e,f);

$\left (\begin{array}{c} x' \\ y' \\ 1 \end{array} \right) = \left( \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} x \\ y \\ 1 \end{array} \right)$

平行移動

右にΔxピクセル、下にΔyピクセル
$\left( \begin{array}{ccc} 0 & 0 & \mathit{\Delta}x \\ 0 & 0 & \mathit{\Delta}y \\ 0 & 0 & 1 \end{array} \right)$

拡大・縮小

x軸方向にs倍、y軸方向にt倍
$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & t & 0 \\ 0 & 0 & 1 \end{array} \right)$

回転

時計回りにθ回転
$\left( \begin{array}{ccc} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{array} \right)$

蛇足

いうまでもないが、それらの合成は行列の積となる。
はてな記法やMarkdownて、TeXの数式使えたのね。