วาดรูปธงชาติด้วย Canvas rect() บน HTML5

วันนี้เราจะมาเรียนรู้เรื่องคำสั่งที่ใช้ในการวาดรูปสี่เหลี่ยมกัน โดยเราจะใช้คำสั่งนี้มาทำการวาดรูปธงชาติไทยของเรากันดู

คำสั่งสำหรับการวาดรูปสี่เหลี่ยม เราจะใช้เป็นคำสั่ง context.rect() โดยมีรูปแบบ การใช้งานดังนี้
context.rect(x,y,width,height);

001

x คือ ตำแหน่งจุดเริ่มต้นในแนวแกน x
y คือ ตำแหน่งจุดเริ่มต้นในแนวแกน y
width คือ ความกว้างของสี่เหลี่ยม
height คือ ความสูงของสี่เหลี่ยม

หลังจากที่รู้เรื่องรูปแบบการใช้งานคำสั่งสำหรับวาดรูปสี่เหลี่ยมกันไปแล้ว เรามาลอง ประยุกต์ใช้ในการวาดรูปธงชาติไทยกันดูดีกว่า

สำหรับการวาดรูปธงชาติเราจะทำการวาดรูปสี่เหลี่ยมทั้งหมด 3 รูป เรียงลำดับจาก สีแดง (ใหญ่ที่สุด) สีขาว (รองลงมา) และ สีน้ำเงิน (เล็กสุด) โดยจะซ้อนทับกันตามลำดับ เราลองมาดูโค้ด เต็มๆ กันเลยดีกว่า ว่าจะออกมาเป็นอย่างไร

002

และผลลัพธ์ที่ได้จากโค้ดด้านบน จะเป็นดังภาพต่อไปนี้

003

เพียงเท่านี้ก็เรียบร้อยแล้ว กับรูปธงชาติไทยของเราทำได้ไม่ยากเลย

Facebook Comments