HTML5 canvas静止描画方法(矩形、多角形、星形)

HTML5になって新たに追加された図形描画のための要素であるcanvasを少し勉強し始めました。

 

作ったデモサイト

こんな感じです。
 

共通の書き方

<canvas id="canvas0" width="500" height="500">
</canvas>

canvasの場合はcssではなく、canvasタグ内にwidth, heightを記載するのが普通らしいです。
(なぜだかはわからない…)

このwidth, heightで描画範囲を規定します。

 

矩形

	var canvas0 = document.getElementById("canvas0");
	var c0 = canvas0.getContext("2d");

	c0.fillStyle = "yellow";
	c0.fillRect(50, 50, 400, 400);

「document.getElementById(“canvas0″)」でid要素を取得して変数に格納します。
「canvas0.getContext(“2d”)」でその要素の2次元描画コンテクストを取得します。

.fillStyleは塗り色を指定するメソッドです。
.fillRect(x座標, y座標, 幅, 高さ)で矩形を描画します。

ちなみにcanvasは左上を(x座標, y座標)=(0, 0)と規定し、右に行くほど、下に行くほどx座標, y座標はプラスとなります。
このあたりはFlashと同じです。

 

多角形

	var canvas1 = document.getElementById("canvas1");
	var c1 = canvas1.getContext("2d");

 	c1.beginPath();
 	c1.moveTo(250, 10);
 	c1.lineTo(10, 490);
 	c1.lineTo(490, 250);
 	c1.closePath();

 	c1.fillStyle = "green";
 	c1.fill();

.beginPath()でパスの開始を、.closePath()でパスの終了を宣言します。
.moveTo(x座標, y座標)で始点を、.lineTo(x座標, y座標)で通過点を設定します。
※どう考えてもmoveFromの方がわかりやすいと思うけど。

.fillStyleで塗り色を指定して、.fillで3点を結ぶ面描画してくれます。
(最終的に始点に戻らなくても良い。)

 

星形

	var canvas2 = document.getElementById("canvas2");
	var c2 = canvas2.getContext("2d");

 	c2.beginPath();
 	c2.moveTo(250, 10);
 	c2.lineTo(50, 450);
 	c2.lineTo(480, 150);
 	c2.lineTo(10, 150);
 	c2.lineTo(450, 450);
 	c2.closePath();

 	c2.fillStyle = "orange";
 	c2.fill();

同じような形で.lineTo(x座標, y座標)でつなぐと星形なども作れます。

 

以上