HTML5のCanvas要素で三角形を表示するサンプルです。
Canvas
- Canvas要素(Canvasタグ)の中に、JavaScriptで2Dグラフィックスを描くことができます。
- 以下は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番目の点の場所が作成され、以下のような図が表示されます。
関連の記事
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)