HTML canvas rect() method
Paglalarawan at paggamit
rect() Ang paraan ay gumagawa ng parihaba.
Paalala:Gumamit ng stroke() o fill() Ang paraan ay talagang gumagawa ng parihaba sa kanvas.
Mga halimbawa
Mga halimbawa 1
Ipagkakita ng parihaba na 150*100 pixel:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Pangangatwiran
context.rect(x,y,width,height);
Halaga ng parametro
| Parametro | Paglalarawan |
|---|---|
| x | Ang x-sukat ng katuwirang x ng parihaba sa itaas ng katuwirang y. |
| y | Ang y-sukat ng katuwirang y ng parihaba sa itaas ng katuwirang x. |
| width | Ang lapad ng parihaba, sa pamamagitan ng pixel. |
| height | Ang taas ng parihaba, sa pamamagitan ng pixel. |
Higit pang mga halimbawa
Mga halimbawa 2
Sa pamamagitan ng paraan ng rect() upang lumikha ng tatlong parihaba:
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> อิเล็กทรอนิกส์
