HTML5 Canvas要素で三角形を表示するサンプル |

HTML5のCanvas要素で三角形を表示するサンプルです。

確認環境
・Windows10
・Google Chrome

Canvas
三角形を表示するサンプル
角を増やして四角形にするサンプル

Canvas

Canvas要素(Canvasタグ)の中に、JavaScriptで２Dグラフィックスを描くことができます。
以下はMDNのCanvas APIのリンクです。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

三角形を表示するサンプル

Canvasで作成した三角形です。

コード

上記サンプルのコードです。

<canvas id="canvas1" width="300" height="200" ></canvas>

<script>
	var canvas1 = document.getElementById("canvas1");
	
	if (canvas1.getContext){
		var ctx = canvas1.getContext("2d");

		ctx.beginPath();
		ctx.moveTo(20,20); //最初の点の場所
		ctx.lineTo(100,150); //2番目の点の場所
		ctx.lineTo(10,150); //3番目の点の場所
		ctx.closePath();	//三角形の最後の線 closeさせる

		ctx.strokeStyle = "rgb(0,0,0)"; //枠線の色
		ctx.stroke();

		ctx.fillStyle="rgba(0,0,255,0.1)";//塗りつぶしの色
		ctx.fill();
	}
</script>

描写の場所

1行目にcanvasタグがあります。ここにグラフィックが描写されます。

描画コンテキスト

4-7行目は、描画コンテキストを取得しています。
描画コンテキストは、描画する出力先や描画の方法を持つ情報です。
7行目のgetContextメソッドの引数2dは、ブラウザが持つ描画のプログラム名です。

線を書く

beginPathで始まり、closePathで閉じます。
10行目のmoveToが始まりの点です。
11,12行目のlineToで指定した位置まで線をひいています。
14行目のclosePathで、10行目のmoveToの位置まで線を引いてcloseさせています。

枠線の色を指定する

15行目のstrokeStyleは、線の色を指定します。
16行目のstrokeメソッドは、線を表示します。

塗りつぶす色を指定する

18行目のfillStyleは、塗りつぶす色を指定します。
19行目のfillメソッドは、塗りつぶしを行います

角を増やして四角形にするサンプル

lineToメソッドは増やすことができます。

上記コードの12行目と13行目の間に、ctx.lineTo(1,70);を追加すると4番目の点の場所が作成され、以下のような図が表示されます。