วิธี closePath
วิธี closePath ปิดรูปทรงที่วาดด้วยวิธี lineTo โดยอัตโนมัติ
โดยวาดเส้นตรงจากจุดสิ้นสุด
ไปยังจุดเริ่มต้น หากรูปทรงถูกปิดแล้ว
หรือเป็นเพียงจุดเดียว วิธีนี้จะไม่ทำ
อะไร
ไวยากรณ์
context.closePath();
ตัวอย่าง
เริ่มต้นด้วยการวาดเส้นสองเส้น โดยไม่ปิด
ด้วย 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();
:
ตัวอย่าง
ทีนี้มาปิดเส้นสองเส้นนี้ให้เป็นรูปทรงด้วย
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,
ซึ่งเติมสีรูปทรงด้วยสีที่กำหนด
