เมธอด strokeRect() ของ HTML canvas
คำอธิบายและการใช้งาน
strokeRect() วิธีการวาดสี่เหลี่ยมผืนผ้า (ไม่ทาสี) โดยเริ่มต้นเส้นทางด้วยความเป็นไปได้ที่ไม่มีสีโดยเริ่มต้นเส้นทางด้วยความเป็นไปได้ที่ไม่มีสี。
คำเตือน：กรุณาใช้ strokeStyle ตั้งค่าสีของเส้นทาง สีสลับหรือมอร์ฟที่ใช้ด้วยโครงสร้าง。
ตัวอย่าง
วาดสี่เหลี่ยมผืนผ้าขนาด 150*100 พิกเซล:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
รูปแบบ
context.strokeRect(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> อิเล็กทรอนิกส์
