HTML5 - Canvas

図形の描画

キャンバスに図形を描画する際は、基本的にパスを使う必要があります。その為には最初にbeginPathメソッドを呼び出す必要があります。また、終わりにはstrokeメソッド、fillメソッドを呼び出す事によって図形が完成します。

パスを描く際の基本的なものとして、moveToメソッドとlineToメソッドがあります。またclosePathメソッドも便利なものなので、beginPathメソッドなどと合わせて、これらのコードを以下に示します。

// beginPathメソッドを呼び出し、描画を始める
	beginPath();

// 描画の始点の移動
	moveTo(x, y);
	
// 始点から(x, y)まで直線を引く
	lineTo(x, y);

// 自動的に始点と終点を結ぶ
	closePath();

// 描いた図形を線で描画
	stroke();

// 描いた図形を塗りつぶして描画
	fill();

サンプル

サンプルを見て頂けると分かる通り、まずmoveToメソッドで始点を指定しています。その次にlineToメソッドで直線を引いていっています。lineToメソッドの始点は以前のパスの終点となっていることが分かります。また、いちいちmoveToで指定した始点までlineToで直線を引くのではなく、closePathメソッドで始点と終点を自動的に結び、手間を省いていることが分かります。

最終的な図形の描画は説明した通り、strokeメソッドかfillメソッドで行っています。左上の三角形はstrokeメソッド、右上の三角形はfillメソッドを用いて三角形を表現しています。左下の図形はclosePathメソッドで閉じずに、そのままstrokeメソッドで図形を描画しています。右下の図形はclosePathメソッドで閉じずに、fillメソッドで塗りつぶしていますが、自動的に始点と終点が閉じられています。これより、fillメソッドはclosePathメソッドの役割を果たしていることが分かります。


// 左上の三角形の描画
	cx.beginPath();
	cx.moveTo(80, 50);
	cx.lineTo(30, 130);
	cx.lineTo(130, 130);
	cx.closePath();
	cx.stroke();

// 右上の三角形の描画
	cx.beginPath();
	cx.moveTo(220, 50);
	cx.lineTo(170, 130);
	cx.lineTo(270, 130);
	cx.fill();
	
// 左下の図形の描画
	cx.beginPath();
	cx.moveTo(40, 200);
	cx.lineTo(125, 260);
	cx.lineTo(125, 200);
	cx.lineTo(40, 260);
	cx.stroke();

// 右下の図形の描画
	cx.beginPath();
	cx.moveTo(180, 200);
	cx.lineTo(265, 260);
	cx.lineTo(265, 200);
	cx.lineTo(180, 260);
	cx.fill();