กวดวิชาผ้าใบ HTML
องค์ประกอบ HTML <canvas> ใช้เพื่อวาดกราฟิกบนหน้าเว็บ
กราฟิกด้านบนสร้างด้วย <canvas>
โดยแสดงสี่องค์ประกอบ ได้แก่ สี่เหลี่ยมผืนผ้าสีแดง สี่เหลี่ยมผืนผ้าไล่ระดับสี สี่เหลี่ยมผืนผ้าหลากสี และข้อความหลากสี
HTML Canvas คืออะไร?
องค์ประกอบ HTML <canvas> ใช้ในการวาดกราฟิกได้ทันที ผ่านการเขียนสคริปต์ (โดยปกติคือ JavaScript)
<canvas> องค์ประกอบเป็นเพียงคอนเทนเนอร์สำหรับกราฟิก คุณต้องใช้สคริปต์เพื่อวาดกราฟิกจริงๆ
Canvas มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และการเพิ่มรูปภาพ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนองค์ประกอบ <canvas> อย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas Can Draw Text
แคนวาสสามารถวาดข้อความที่มีสีสันได้ ไม่ว่าจะมีหรือไม่มีแอนิเมชั่น
HTML Canvas Can Draw Graphics
Canvas มีคุณสมบัติที่ยอดเยี่ยมสำหรับการนำเสนอข้อมูลแบบกราฟิกด้วยภาพกราฟและแผนภูมิ
HTML Canvas สามารถเคลื่อนไหวได้
วัตถุผ้าใบสามารถเคลื่อนย้ายได้ ทุกอย่างเป็นไปได้ ตั้งแต่ลูกบอลกระดอนง่ายๆ ไปจนถึงแอนิเมชั่นที่ซับซ้อน
HTML Canvas สามารถโต้ตอบได้
Canvas สามารถตอบสนองต่อเหตุการณ์ JavaScript
Canvas สามารถตอบสนองต่อการกระทำของผู้ใช้ (การคลิกปุ่ม การคลิกเมาส์ การคลิกปุ่ม การเคลื่อนไหวของนิ้ว)
HTML Canvas สามารถใช้ในเกมได้
วิธีการของ Canvas สำหรับแอนิเมชั่น มีความเป็นไปได้มากมายสำหรับแอปพลิเคชันเกม HTML
ตัวอย่างผ้าใบ
ใน HTML องค์ประกอบ <canvas> จะมีลักษณะดังนี้:
<canvas id="myCanvas" width="200" height="100"></canvas>
องค์ประกอบ <canvas> ต้องมีแอตทริบิวต์ id เพื่อให้สามารถอ้างอิงได้โดย JavaScript
แอตทริบิวต์ width และ height จำเป็นในการกำหนดขนาดของผ้าใบ
เคล็ดลับ:คุณสามารถมีองค์ประกอบ <canvas> ได้หลายรายการในหน้า HTML หน้าเดียว
โดยค่าเริ่มต้น องค์ประกอบ <canvas> ไม่มีเส้นขอบและไม่มีเนื้อหา
หากต้องการเพิ่มเส้นขอบ ให้ใช้แอตทริบิวต์ style:
ตัวอย่าง
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
บทต่อไปแสดงวิธีการวาดบนผืนผ้าใบ