図形を移動する(translate) [html5 の Canvas を使ってみる：第廿回]

translate(); を使って、一度描いた図形を移動できる。サンプルでは、x:50、y:50 を基点とした幅 100、高さ 50 の矩形を使用し、変形前を赤、変形後を青の線にしてみた。

★html 側

<canvas id="translate"></canvas>

★Javascript 側

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

// 赤い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(255, 0, 0)";
  c.rect(50, 50, 100, 50);
  c.stroke();
// 青い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(0, 0, 255)";
// x 軸に -20、y 軸に 30 移動
  c.translate(-20, 30);
  c.rect(50, 50, 100, 50);
  c.stroke();
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5