【Canvas入門3】HTML5のCanvasを使って三角形を描画する方法

前回まではcanvasを使って四角形、円形などを描画する方法を紹介しました。

今回は三角形を描画する方法を紹介します。

三角形を作るときにはパスを結ぶためのlineToメソッドを使います。

canvasを使って三角形を描画する方法

html

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

javascript

let canvas = document.getElementById('canvas');
let cv = canvas.getContext('2d');

cv.beginPath();
cv.moveTo(50,50);
cv.lineTo(150,200);
cv.lineTo(50,200);
cv.closePath();

cv.strokeStyle = '#000';  // 線の色
cv.stroke();

cv.fillStyle = "#eee";  //塗りつぶしの色
cv.fill();

サンプル

補足

moveTo

moveToは新しいサブパスの開始点の座標を指定します。

サブパスとは、パスで作られた一本の線のことを指します。

moveToの基本構文

moveTo(x, y)

lineTo

lineToは直線でサブパスのつなぐための指定をします。

closePath

closePathは最後の座標とはじめの座標を結んでパスを閉じるための指定になります。