JavaScript»キャンバス»lineToで多角形を描く パスをつかって図形をぬりつぶす

ファイル名: js-canvas/quest_00065.html

下のソースコードをうつして、キャンバスに図のような三角形をかいてみましょう。

ソースコード

const canvas = document.getElementById("triangle");
const context = canvas.getContext("2d");

context.fillStyle = "rgb(255, 182, 193)";

context.beginPath();
context.moveTo(160, 100);
context.lineTo(80, 200);
context.lineTo(240, 200);
context.closePath();
context.fill();

解説

9行目までは今までの説明通り”path”を引いています。
この時点で”path”は3点を結んだ”く”のような形になっています。
そこで

context.closePath();

を使うことで開いている部分を直線で結び、閉じる(close)ことが出来ます。
その結果、”path”は3点をそれぞれ結んだ三角形になります。

context.fill();

今まで何度か出てきた”fill”ですが、今回の場合”path”で囲まれた部分を塗りつぶしています。
三角形以外にも様々な図形を描くことが出来るので是非チャレンジしてみましょう。