HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -

連載 :

2012年10月11日(木)

TIPS 030：画像を拡大／回転／変形して表示する

Canvas APIでは、scale（拡大縮小）、rotate（回転）、translate（移動）、transform（変形）など、図形を変形／加工するためのさまざまなメソッドが用意されています。以下では、これらのメソッドを利用した例を見てみましょう。

［リスト03］画像を拡大／回転／変形するコード（transform.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    if (HTMLCanvasElement) {
04      var cv = document.querySelector('#cv');
05      var c = cv.getContext('2d');
06      // 初期状態のコンテキストをあらかじめ保存
07      for (var i = 0; i < 3; i++) { c.save(); }
08      // 画像を準備
09      var img = new Image();
10      img.src = 'wings.jpg';
11      img.addEventListener('load', function(e) {
12        // 半分に縮小して描画
13        c.scale(0.5, 0.5);
14        c.drawImage(img, 0, 0);
15  
16        // 30°回転したものを描画
17        c.restore();
18        c.rotate(30 * Math.PI / 180);
19        c.drawImage(img, 50, 50);
20  
21        // （180, 200）ずらした上で描画
22        c.restore();
23        c.translate(180, 200);
24        c.drawImage(img, 0, 0);
25  
26        // 変形マトリクスで変換した上で描画
27        c.restore();
28        c.transform(1, 1, 1, -1, 0, 0);
29        c.drawImage(img, 70, 100);
30      });
31    }
32  }
33);

図3：画像を加工した上で貼り付け（クリックで拡大）

それぞれの構文を見てみましょう。

［構文］scale／rotate／translate／transformメソッド

scale(横倍率, 縦倍率) … 拡大／縮小
rotate(角度) … 回転
translate(水平方向, 垂直方向) … 移動
transform(m11, m12, m21, m22, dx, dy) … 変形

transformメソッドは、scale／rotate／translateメソッドをひとつにまとめたメソッドと言っても良いでしょう。以下のような変換マトリクスを使って、図形を変形させます。

図4：図形を変形させる変換マトリクス（クリックで拡大）

単純な拡大／縮小、回転、移動には専用のメソッドの方が簡単ですが、より複雑な座標変換には、transformメソッドを利用します。以下に簡単な利用パターンをまとめます。

表2：transformメソッドの利用例

例	概要
transform(x, 0, 0, y, 0, 0)	横x倍、縦y倍に拡大
transform(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0)	r（ラジアン）だけ回転
transform(1, 0, 0, 1, x, y)	水平方向にx、垂直方向にyだけ移動

なお、transformメソッドは、実行都度に変換マトリクスを累積していきます。

もしも新たに変換マトリクスを適用したい（または、状態を初期化したい）という場合には、setTransformメソッドを利用してください。setTransformメソッドは、変換マトリクスを累積するのではなく、新たに設定し直します。

サンプルでは、キャンバス状態の初期化にrestoreメソッドを利用していますが、代わりにsetTransformメソッドを使って、以下のように書いても良いでしょう。

`1`	`c.setTransform(1, 0, 0, 1, 0, 0);`

TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける

getImageDataメソッドを利用すると、キャンバス上の特定の領域を切り出すことができます。また、切り出した画像はputImageDataメソッドを利用することで、同じキャンバス（または異なるキャンバス）に貼り付けることができます。

以下は、上のキャンバスに描画した画像の一部を切り出し、下のキャンバスに貼り付ける例です。

［リスト04］キャンバスに描画された図形の一部をコピーするコード（imageData.html）

01window.addEventListener('DOMContentLoaded',
02  function() {
03    if (HTMLCanvasElement) {
04      // 上下キャンバスのコンテキストを準備
05      var cv = document.querySelector('#cv');
06      var c = cv.getContext('2d');
07      var cv2 = document.querySelector('#cv2');
08      var c2 = cv2.getContext('2d');
09      // 上のキャンバスに画像を貼り付け
10      var img = new Image();
11      img.src = 'rin.jpg';
12      img.addEventListener('load', function(e) {
13        c.drawImage(img, 0, 0, 400, 300);
14        // 座標（180, 150）から150×150の大きさで画像を切り出し
15        var d  = c.getImageData(180, 150, 150, 150);
16        // 下のキャンバス（50, 50）の位置に切り出した画像を貼り付け
17        c2.putImageData(d, 50, 50);
18      });
19    }
20  }
21);
22...中略...
23<canvas id="cv" width="400" height="300">
24Canvas機能に対応したブラウザでアクセスしてください。
25</canvas><br />
26<canvas id="cv2" width="400" height="300">
27Canvas機能に対応したブラウザでアクセスしてください。
28</canvas>