วิธี Canvas fillRect()

คู่มือเรียกและอธิบาย Canvas

การประกาศและการใช้งาน

fillRect() วิธีการใช้โปรแกรมที่วาดสี่เหลี่ยมผืนผ้าที่เติมเพิ่ม โดยค่าเริ่มต้นของสีที่เติมเพิ่มคือสีดำ

คำแนะนำ:ใช้ fillStyle ตัวแปรที่ใช้ตั้งค่าสี สีขี้เหลือง หรือต้นแบบที่ใช้เพื่อการทายทาย

ตัวอย่าง

วาดสี่เหลี่ยมผืนผ้าที่เติมเพิ่ม 150*100 พิกเซล

เว็บเบราวเซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas

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>

คู่มือเรียกและอธิบาย Canvas