บทความนี้ส่วนใหญ่แนะนำตัวอย่างของรูปสี่เหลี่ยมผืนผ้าวาดในผืนผ้าใบ HTML5 บทความนี้ใช้ APIs สามตัว: Fillrect, Strokerect และ ClearRect เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
บทความนี้แปลจาก Steve Fulton และ Jeff Fulton HTML5 Canvas, บทที่ 2, รูปสี่เหลี่ยมผืนผ้าพื้นฐาน
ลองมาดูรูปทรงเรขาคณิตที่เรียบง่ายในผืนผ้าใบ - วาดรูปสี่เหลี่ยมผืนผ้า ในผืนผ้าใบมีสามวิธีในการวาดสี่เหลี่ยม: fillrect, stroke (strokerect) และ clearrect แน่นอนเรายังสามารถใช้เส้นทางเพื่อแสดงตัวเลขทั้งหมดรวมถึงสี่เหลี่ยม
นี่คือ API สำหรับสามวิธีข้างต้น:
1.Fillrect (x, y, ความกว้าง, ความสูง) วาดสี่เหลี่ยมผืนผ้าที่เป็นของแข็งเริ่มต้นจาก (x, y), ความกว้างและความสูง
2.Strokerect (x, y, ความกว้าง, ความสูง) วาดกล่องสี่เหลี่ยมเริ่มต้นจาก (x, y), ความกว้างและความสูง กล่องสี่เหลี่ยมจะถูกแสดงในรูปแบบที่แตกต่างกันตามชุด Strokestyle, linewidth, linejoin และ miterlimit คุณสมบัติ
3.ClearRect (x, y, ความกว้าง, ความสูง) ล้างพื้นที่สี่เหลี่ยมเริ่มต้นจาก (x, y), ความกว้างและความสูงทำให้โปร่งใสอย่างสมบูรณ์
ก่อนที่จะเรียกวิธีการด้านบนเพื่อวาดผืนผ้าใบเราต้องตั้งค่าสไตล์การเติมและจังหวะ วิธีพื้นฐานที่สุดในการตั้งค่าสไตล์เหล่านี้คือการใช้สี 24 บิต (แสดงในสตริงเลขฐานสิบหก) นี่คือตัวอย่างง่ายๆ:
คัดลอกรหัส