closePathメソッド
メソッド closePath は、
メソッド lineTo を使って描画された
図形を自動的に閉じ、終点から始点へ直線を引きます。
図形がすでに閉じられているか、単なる点である場合、
このメソッドは何もしません。
構文
コンテキスト.closePath();
例
まず始めに、2本の線を closePath で閉じずに描画してみましょう：
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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 で閉じて、三角形の図形にしてみましょう：
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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 を使って図形を閉じて、四角形を描画してみましょう：
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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();
:
関連項目
-
メソッド
fill,
指定した色で図形を塗りつぶします
