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

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

Canvas

コード

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>

結果

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

a

補足

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

b

関連の記事

HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 Video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル



△上に戻る