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

transform(); では変換マトリクスの値によって効果を加えたが、重ねて transform(); を記述すると効果が重ねられてしまうので、新しい定義を行う場合には setTransform(); を使うみたい。

まず、transform(); を重ねた場合。下は赤い矩形の位置から x:50、y:30 をずらすマトリクスが重ねられるので、青い矩形が 2 つ見えることになる。


★html 側

<canvas id="setTransform"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: setTransform で 2 次元描画を行うことの定義
  var c = document.getElementById("setTransform").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 軸へ 50、y 軸へ 30 移動させる
  c.setTransform(1, 0, 0, 1, 50, 30);
// fillRect(); で青の透明度 50% の矩形を描画
  c.fillStyle = "rgba(0, 0, 255, .5)";
  c.fillRect(10, 10, 30, 30);
}

すると、こうなる。transform(); で定義した内容と同じ内容を setTransform(); で定義しているので、青い矩形は 2 つ見えずに重なった姿として見えているので、青い矩形は濃く見える。


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

W3C；
4.8.11 The canvas element — HTML 5