วิธี HTML canvas rect()
คำอธิบาย และการใช้งาน
rect() วิธีนี้สร้างกล่องกลม.
คำแนะนำ:ใช้ stroke() หรือ fill() วิธีนี้จะวาดกล่องกลมที่แน่นอนบนกระดานวาด.
ตัวอย่าง
ตัวอย่าง 1
วาดกล่องกลมขนาด 150*100 พิกเซล:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
รูปแบบ
context.rect(x,y,width,height);
ค่าตัวแปร
| ตัวแปร | คำอธิบาย |
|---|---|
| x | ตำแหน่ง x ของมุมบนขวาของกล่องกลม |
| y | ตำแหน่ง y ของมุมบนขวาของกล่องกลม |
| width | ความกว้างของกล่องกลม แบบพิกเซล |
| height | ความสูงของกล่องกลม แบบพิกเซล |
ตัวอย่างเพิ่มเติม
ตัวอย่าง 2
สร้างสามกล่องกลมด้วยวิธี rect()
JavaScript:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// สีแดงทรงกลม
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// สี่เหลี่ยมกลมสีเขียว
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// สี่เหลี่ยมกลมสีฟ้า
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางนี้ระบุว่าเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชันก่อนหน้านี้ไม่สนับสนุนองค์ประกอบ <canvas>
