図形を拡大・縮小する(scale) [html5 の Canvas を使ってみる：第十九回]

図形を拡大・縮小するには scale(); を使えば簡単にできる。この辺りも svg とよく似ている。サンプルでは、x:50、y:50 を基点とした幅 100、高さ 50 の矩形を使用し、変形前を赤、変形後を青の線にしてみた。

★html 側

<canvas id="scale"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: scale で 2 次元描画を行うことの定義
  var c = document.getElementById("scale").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)";
// 横幅を 1.5 倍、高さを 0.5 倍に変更
  c.scale(1.5, 0.5);
  c.rect(50, 50, 100, 50);
  c.stroke();
}

また、scale(); を使用して拡大・縮小しても、矩形を描く基点となる座標は維持されず、指定した比率に従って基点が移動するようなので、補助線を引いてみた。すると、こうなる。


すると、x の座標は、元の 50 + 50 * (1.5 - 1) で 75 であることが判る。y の座標は同じように、50 + 50 * (0.5 - 1) で 25 となる。補助線はこの位置に引いている。

もう一度、比率を変えてみる。今度は横幅を 1.7 倍、高さを 0.8 倍に変更しちゃう。

// 横幅を 1.7 倍、高さを 0.8 倍に変更
  c.scale(1.7, 0.8);

これも、x の座標は 50 + 50 * (1.7 - 1) で 85、y の座標は 50 + 50 * (0.8 - 1) で 40 となっている。

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

W3C；
4.8.11 The canvas element — HTML 5