วิธี HTML canvas fillRect()
การประกาศและการใช้งาน
fillRect() วิธีเรียกใช้ฟังก์ชันเพื่อวาดสี่เหลี่ยมจัตุรัสที่ถูกทาสี "เติมสี" โดยเริ่มต้นค่าสีที่ใช้เติมเป็นสีดำ
คำแนะนำ:โปรดใช้ fillStyle คุณสมบัติเพื่อตั้งค่าสีที่ใช้เติมภาพวาด สีสลับหรือตรงแบบ
ตัวอย่าง
วาดสี่เหลี่ยมจัตุรัสที่ถูกทาสีขนาด 150*100 พิกเซล
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
การเขียน
context.fillRect(x,y,width,height);
ตัวแปรค่า
| ตัวแปร | การอธิบาย |
|---|---|
| x | ตำแหน่ง x ของมุมบนซ้ายของสี่เหลี่ยมจัตุรัส |
| y | ตำแหน่ง y ของมุมบนซ้ายของสี่เหลี่ยมจัตุรัส |
| width | ความกว้างของสี่เหลี่ยมจัตุรัส ด้วยพิกเซล |
| height | ความสูงของสี่เหลี่ยมจัตุรัส ด้วยพิกเซล |
การสนับสนุนของเบราเซอร์
ตัวเลขในตารางระบุเวอร์ชั่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อไปนั้นไม่สนับสนุนองค์ประกอบ <canvas>
