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

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

Canvas

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

コード

32行目にcanvasタグがあります。ここにグラフィックが描写されます。
16行目のmoveToが始まりの点になります。
18,19行目のlineToで指定した位置まで線をひいています。
21行目のclosePathで、16行目のmoveToの位置まで線を引いてcloseさせています。
22行目と23行目は枠線の色を設定しています。
24行目と25行目は枠内の塗りつぶしの色を設定しています。
9行目のwindow.onloadは、HTMLの読み込みが完了してから実行する命令です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Canvasの三角形のサンプル</title>
<style>
</style>
<script>
window.onload = function(){	

	var canvas1 = document.getElementById('test1');
	
	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>
</head>
<body >

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

</body>
</html>

結果

上記コードを実行すると以下のような三角形が表示されます。

補足

lineToメソッドは増やすことができます。
例えば、20行目にctx.lineTo(1,70);を追加すると4番目の点の場所が作成され、以下のような図が表示されます。