矩形に変換マトリクスを加える(transform) [html5 の Canvas を使ってみる：第卌ニ回]

transform(); では変換マトリクスの値によって場所を移動したり(translate)、回転したり(rotate)と効果を与えられるらしいのでやってみる。

★html 側

<canvas id="transform"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: transform で 2 次元描画を行うことの定義
  var c = document.getElementById("transform").getContext('2d');

// fillRect(); で赤の透明度 50% の矩形を描画
  c.fillStyle = "rgba(255, 0, 0, .5)";
  c.fillRect(10, 10, 30, 30);
// x 軸へ 50、y 軸へ 30 移動させる
  c.transform(1, 0, 0, 1, 50, 30);
// fillRect(); で青の透明度 50% の矩形を描画
  c.fillStyle = "rgba(0, 0, 255, .5)";
  c.fillRect(10, 10, 30, 30);
}

すると、こうなる。x:10、y:10 の矩形に transform で x 軸に 50、y 軸へ 30 移動させているので、x:60、y:40 の位置に青い矩形が描画される。translate(50, 30); と同じ効果。また、今回使った fillRect(); のような描画命令の前に transform(); を記述しないと効果は反映されない。
translate(); の効果の場合はこのように記述する。

c.transform(1, 0, 0, 1, 50, 30);

次に、青い矩形の 1 つに transform(); をかけた後、同じ transform(); を 2 つめの青い矩形に記述してみる。すると、1 回目の transform(); と 2 回目の transform(); の効果を併せたものが反映される。

c.fillStyle = "rgba(255, 0, 0, .5)";
c.fillRect(10, 10, 30, 30);
// 1 回目の矩形に transform(); を記述
c.transform(1, 0, 0, 1, 50, 30);
c.fillStyle = "rgba(0, 0, 255, .5)";
c.fillRect(10, 10, 30, 30);
// 2 回目の矩形にも同じ transform(); を記述
c.transform(1, 0, 0, 1, 50, 30);
c.fillRect(10, 10, 30, 30);

すると、2 つめの青い矩形は、2 回の transform(); の効果を重ねたものとして描画される。


次に、拡大・縮小する scale(); の効果で幅を 2 倍、縦に 1.5 倍にしてみる。
scale(); の効果の場合はこのように記述する。下記の例で赤い矩形と青い矩形の描画開始位置がずれているが、これは scale(); を参照。

c.transform(2, 0, 0, 1.5, 0, 0);

最後に、回転する rotate(); の効果で 30°回転させてみる。ただ矩形の描画開始位置がこのままだと青い矩形の変化具合が判らないので、x:50、y:50 で描画した。
rotate(); の効果の場合はこのような記述形式になる。

// 先に角度を設定
var r = 30 * Math.PI / 180;
// transform(); を定義
c.transform(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0);

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5