JavaScriptのCanvas APIでパスを使い、三角形を描く方法を解説します。以前紹介したfillRect()やstrokeRect()では描くことができない図形もパスを使うことで実現することができます。

目次 [ close ]
  1. 下準備
  2. パスで三角形を描画

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてコンテキストを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を指定してあります。

パスで三角形を描画

jsに以下のコードを追加することでパスによる線を描画することができます。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 90);
ctx.lineTo(90, 10);
ctx.stroke();
パスで線を描画

beginPath()でパスを開始し、その後の処理で作成したパスを元に、stroke()で実際に描画します。まずはmoveTo(x, y)で始点を移動します。あとはlineTo(x, y)を呼ぶたびに、指定した座標へのパスが連続的に作られます。最後にstroke()を実行することで作られたパスを元に直線を描画します。

stroke()の直前に以下のコードを追加してみましょう。

ctx.closePath();
パスで三角形の輪郭を描画

closePath()を実行すると、パスの終点と始点が直線で結ばれます。これで三角形の輪郭を描くことができました。

次に、stroke()を以下に置き換えてみましょう。

ctx.fill();
パスで三角形を描画（塗りつぶし）

fill()を実行すると、パスでできた図形の内部を塗りつぶします。fill()はstroke()と違い、実行すると自動でパスを閉じてくれます。そのため直前のclosePath()を削っても同じ結果になります。

これまでに紹介したfillRect()やstrokeRect()と同様に、線の太さや色、塗りつぶしの色なども指定可能です。

ctx.fillStyle = 'green'; // 塗りつぶしの色
ctx.strokeStyle = 'green'; // 線の色
ctx.lineWidth = 8; // 線の太さ
緑で塗りつぶし