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

html-canvas

ทำความรู้จัก 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.

Avatar
About Mr. ONE - Admin 1540 Articles
ทำงานด้านไอทีโดยเฉพาะ ชอบเทคโนโลยีเป็นชีวิตจิตใจ ชอบขีดๆ เขียนๆ โดยเฉพาะเขียนข้อมูลเกี่ยวกับการใช้คอมพิวเตอร์ โปรแกรม มีประสบการณ์การเขียนหนังสือคอมพิวเตอร์ เขียนแบบเรียนระบบสารสนเทศทางด้านโรงแรม