closePathメソッド

メソッド closePath は、 メソッド lineTo を使って描画された 図形を自動的に閉じ、終点から始点へ直線を引きます。 図形がすでに閉じられているか、単なる点である場合、 このメソッドは何もしません。

構文

javascriptコンテキスト.closePath();

例

まず始めに、2本の線を closePath で閉じずに描画してみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

例

次に、この2本の線を closePath で閉じて、三角形の図形にしてみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // 線を図形として閉じる
ctx.stroke();

Результат:

例

最後の線の代わりに closePath を使って図形を閉じて、四角形を描画してみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // 線を図形として閉じる
ctx.stroke();

Результат:

関連項目