ตัวอย่าง
วาดสอง 150*100 พิกเซลรูปสี่เหลี่ยม เติมด้วยสีแดงและอื่น ๆ ที่มีสีฟ้า:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill(); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| fill() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
fill() วิธีการเติมภาพวาดปัจจุบัน (เส้นทาง) สีเริ่มต้นเป็นสีดำ
เคล็ดลับ: ใช้ fillStyle คุณสมบัติการเติมด้วยสีอื่น / การไล่ระดับสี
หมายเหตุ: หากเส้นทางที่ไม่ได้ปิดการ fill() วิธีการจะเพิ่มเส้นจากจุดสุดท้ายที่จะ StartPoint ของเส้นทางที่จะปิดเส้นทาง (เช่น closePath() ) แล้วกรอกข้อมูลเส้นทาง
| ไวยากรณ์ javascript: | context.fill(); |
|---|