วาดรูปด้วย tag Canvas ใน HTML5

Canvas HTML

ทำความรู้จัก CANVAS

CANVAS คือแท็คใหม่ที่ใช้สำหรับ HTML5 โดยเฉพาะ ใช้สำหรับการกำหนดพื้นที่ว่างๆ สำหรับการวาดรูป หรือขีดๆ เขียนๆ ดังนั้น ถ้าเว็บบราวเซอร์ไหน ไม่ลองรับ HTML5 นั่นหมายความว่า คำสั่ง Canvas นี้จะไม่สามารถแสดงผลได้อย่างถูกต้อง เราสามารถกำหนดขนาดของ Canvas ได้ง่ายๆ เพียงเิ่พิ่มคำสั่งในส่วนของ width และ height เท่านั้น

รูปแบบคำสั่ง CANVAS

  • <CANVAS ID = “xxx” width = “xxx” height = “xxx”> </CANVAS>

ตัวอย่างการใช้งานคำสั่ง CANVAS

วาดรูปสี่เหลี่ยม ขนาดต่างๆ และมีความหนาของเส้นที่แตกต่างกันออกไป นอกจากนี้ข้อความระหว่างแท็ค CANVAS ยังใช้สำหรับการตรวจสอบว่าบราวเซอร์ที่ใช้อยู่นี้ รองรับภาษา HTML5 หรือไม่อีกด้วย

ทดสอบการใช้คำสั่ง CANVAS

คำสั่ง

<canvas style=”border: 1px solid #000000;” width=”200″ height=”100″> Your browser does not support the HTML5 canvas tag.</canvas>

ผลลัพธ์
Your browser does not support the HTML5 canvas tag.

 

คำสั่ง

<canvas style=”border: 3px solid #000000;” width=”250″ height=”100″> Your browser does not support the HTML5 canvas tag.</canvas>
ผลลัพธ์

Your browser does not support the HTML5 canvas tag.

 

คำสั่ง

<canvas style=”border: 5px solid #000000;” width=”350″ height=”100″> Your browser does not support the HTML5 canvas tag.</canvas>

ผลลัพธ์

Your browser does not support the HTML5 canvas tag.