วิธี closePath

วิธี closePath ปิดรูปทรงที่วาดด้วยวิธี lineTo โดยอัตโนมัติ โดยวาดเส้นตรงจากจุดสิ้นสุด ไปยังจุดเริ่มต้น หากรูปทรงถูกปิดแล้ว หรือเป็นเพียงจุดเดียว วิธีนี้จะไม่ทำ อะไร

ไวยากรณ์

javascriptcontext.closePath();

ตัวอย่าง

เริ่มต้นด้วยการวาดเส้นสองเส้น โดยไม่ปิด ด้วย 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();

Результат:

ตัวอย่าง

ทีนี้มาปิดเส้นสองเส้นนี้ให้เป็นรูปทรงด้วย 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();

Результат:

ดูเพิ่มเติม