HTML5のcanvasのtransformを理解する1

HTML5のcanvasのリファレンスを見ると、transform()メソッドのところ http://www.html5.jp/canvas/ref/method/transform.html には次のように書かれている。

context . transform(m11, m12, m21, m22, dx, dy)
下記の通りに引数に指定されたマトリックスを適用して、変換マトリックスを変更します。

それで変換マトリックスは、というと以下のように書かれている。

|m11  m12  dx|
|m21  m22  dy|
|  0    0   1|

これはちょっと言葉が足りない。具体的には、変換前の座標を(x, y)、変換後の座標を(x', y')とすると、以下のような変換になるよという意味だ。

|x'|   |m11  m12  dx| |x|
|y'| = |m21  m22  dy| |y|
| 1|   |  0    0   1| |1|

これは、同次(斉次)座標で書かれているため、見慣れていない人にはわかりにくいかもしれない。

でも、単に行列のかけ算をやってやると、以下のようになる。

x' = m11*x + m12*y + dx
y' = m21*x + m22*y + dy

つまり、(dx, dy)が並行移動で、m11からm22までが、原点を中心とした回転や拡大縮小(ただし縦横は独立に指定可能)だ。
なんで、これで並行移動や回転や拡大縮小になるのかという話は、次回以降に書く(予定)。

これを数学的にきれいに書いたのが、最初の同次座標による表現である。

この変換は、アフィン変換と呼ばれ、並行移動、回転、拡大縮小を組み合わせた変形だ。
わかりやすく言えば、正方形を並行四辺形に変形できる。
HTML5のcanvasのリファレンスのtransform()メソッドのところ http://www.html5.jp/canvas/ref/method/transform.html には、時計の画像を変形したサンプルが載っているが、まさにそんな感じだ。

じゃ、これで、並行移動するにはどうしたらいいのとか、そういう話は次回以降。