Canvasによるグラフィック描画(2) (3/7)

図形を描くとき、「これを回転させたい」とか、「びにょーんと変形させたい」というようなことを考えたことはないでしょうか。こうした図形の変形処理は、Canvasでは「座標軸の変換」として処理することができます。

コンピュータでグラフィックを描く場合、基準となるエリアの左上に(0,0)の地点がある座標にそって描画をしています。これまでCanvasで図形をいろいろ描いてきましたが、それらもすべてCanvasの左上を(0,0)とし、１ドット単位でメモリがふられている座標軸にそって描かれていた、と考えてもよいでしょう。

この、描画の基準となる座標軸を操作することにより、図形を変形させよう、というのが座標軸変換の考え方です。用意されている変換は、基本的に以下の３つです。

・平行移動

translate( 横幅, 縦幅);

座標軸を縦横指定の幅だけ移動するものです。

・拡大

scale( 横倍率, 縦倍率 );

座標軸のメモリを拡大するものです。横軸と縦軸それぞれ倍率を指定できます。縮小したい場合は、０～１の小数を指定します。（例えば、0.5倍にすれば半分の大きさになります）。

・回転

rotate( 角度 );

座標軸を回転するものです。これはラジアン単位による回転角度を引数に指定します。これにより時計回りに座標軸が回転します。逆方向ならマイナス値を引数に指定します。

下に、これらの座標軸変換を使った簡単なサンプルをあげておきましょう。平行移動、拡大（実は縮小ですが……）、回転を繰り返し行ないながら四角形を描画したものです。こんな図形が座標軸変換により作成できます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function draw(id) {
	var canvas = document.getElementById(id);
	if (canvas == null)
		return false;

	var context = canvas.getContext('2d');
	context.fillStyle = "#EEEEFF";
	context.fillRect(0, 0, 400, 300);
	// 描画
	context.translate(200,50);
	context.fillStyle = 'rgba(255,0,0,0.25)';
	for(var i = 0;i < 50;i++){
		context.translate(25,25);
		context.scale(0.95,0.95);
		context.rotate(Math.PI / 10);
		context.fillRect(0,0,100,50);
	}
}