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.beginPath();
 	c0.moveTo(100, 100);
 	c0.lineTo(400, 400);

 	c0.lineWidth = 30;
 	c0.strokeStyle = "pink";
 	c0.stroke();

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

.beginPath()でパスの開始を、.closePath()でパスの終了を宣言します。
.moveTo(x座標, y座標)で始点を、.lineTo(x座標, y座標)で通過点を設定します。
.lineWidthで線の太さを指定します。
.strokeStyleは線の色を指定し.stroke()で線を引きます。

 

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

 	c1.beginPath();
 	c1.arc(250, 250, 150, 0, 2*Math.PI, false);
	c1.fillStyle = "red";
 	c1.fill();

.beginPath()でパスの開始を宣言します。
.arc(中心点のx座標, 中心点のy座標, 半径, 開始ラジアン角, 終了ラジアン角, 回転方向)。
※Math.PIは円周率πなので、2*Math.PI=360°ということです。
また、回転方向はtrue=反時計回り、false=時計回りとなります。

 

円とほぼ同じですね。

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

	var angle1 = 40/180 * Math.PI;
	var angle2 = 300/180 * Math.PI;

 	c2.beginPath();
 	c2.arc(250, 250, 200, angle1, angle2, false);
	c2.strokeStyle = "yellow";
 	c2.lineWidth = 10;
 	c2.stroke();

angle1, angle2で角度を変数として格納しています。
Math.PI=π=180°なわけなので、angle1, angle2はそれぞれ40°, 300°となります。

 

以上