HTML canvas strokeRect() Method

วาดรูปสี่เหลี่ยมผืนผ้า 150*100 พิกเซล:

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(20, 20, 150, 100);

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
strokeRect()	Yes	9.0	Yes	Yes	Yes

วิธี strokeRect() วาดรูปสี่เหลี่ยมผืนผ้า (ไม่มีการเติม) สีเริ่มต้นของเส้นขีดคือสีดำ

เคล็ดลับ:ใช้ คุณสมบัติ strokeStyleเพื่อตั้งค่าสี การไล่ระดับสี หรือรูปแบบเพื่อจัดรูปแบบเส้นโครงร่าง

ไวยากรณ์ JavaScript:	บริบท .strokeRect ( x,y,ความกว้าง,ความสูง );

Parameter	Description	Play it
x	The x-coordinate of the upper-left corner of the rectangle
y	The y-coordinate of the upper-left corner of the rectangle
width	The width of the rectangle, in pixels
height	The height of the rectangle, in pixels