ผ้าใบ HTML closePath()เมธอด
ตัวอย่าง
วาดเส้นทางที่มีรูปร่างเป็นตัวอักษร L แล้วลากเส้นกลับไปที่จุดเริ่มต้น:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| closePath() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
วิธี closePath() สร้างเส้นทางจากจุดปัจจุบันกลับไปยังจุดเริ่มต้น
เคล็ดลับ:ใช้วิธีstroke()เพื่อวาดเส้นทางบนผืนผ้าใบจริงๆ
เคล็ดลับ:ใช้วิธีfill()เพื่อเติมรูปวาด (สีดำเป็นค่าเริ่มต้น) ใช้ คุณสมบัติ fillStyle เพื่อเติมสี/การไล่ระดับสีอื่น
| ไวยากรณ์ JavaScript: | บริบท .closePath(); |
|---|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้สีแดงเป็นสีเติม:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
❮ การอ้างอิงผ้าใบ HTML