อบรม Canvas HTML

HTML <canvas> อนุญาตให้วาดกราฟฟิกบนเว็บไซต์。

กราฟฟิกที่มีด้านบนนี้สร้างด้วย <canvas>

มันแสดงสี่อิเล็ม: สี่แบบสี่เหลี่ยมผืนผ้าสีแดง สี่เหลี่ยมผืนผ้าที่มีสีเพื่อเรียบเรียง สี่เหลี่ยมผืนผ้าที่มีสีหลากหลาย และข้อความที่มีสีหลากหลาย

อะไรคือ HTML Canvas?

อิเล็มนต์ <canvas> ของ HTML ใช้เพื่อวาดกราฟฟิกโดยอัตโนมัติผ่านสคริปต์ (มักเป็น JavaScript)

อิเล็มนต์ <canvas> มีความหมายเป็นแท้งความเป็นตัวแทนของกราฟฟิก คุณจำเป็นต้องใช้สคริปต์ (มักเป็น JavaScript) เพื่อวาดกราฟฟิกที่แท้จริง

Canvas มีวิธีหลายทางเลือกสำหรับวาดทางแบบที่ต่างกัน หลายทางแบบ รูปวงกลม ข้อความ และเพิ่มรูปภาพ

HTML Canvas สามารถวาดข้อความ

Canvas สามารถวาดข้อความสี และยังสามารถมีแอนิเมชันด้วย

HTML Canvas สามารถวาดกราฟฟิก

Canvas มีความสามารถแข็งแกร่งในการแสดงรูปแบบและกราฟฟิกของข้อมูล

HTML Canvas สามารถทำแอนิเมชัน

แปลงตัวแบบเป็นวัตถุ Canvas สามารถเคลื่อนย้ายได้ ทุกอย่างที่อาจคิดได้นั้นทุกอย่าง จากลูกบอลที่เล่นง่ายไปจนถึงแอนิเมชันที่ซับซ้อน

HTML Canvas สามารถสื่อสาร

Canvas สามารถตอบสนองกับเหตุการณ์ JavaScript

Canvas สามารถตอบสนองความเคลื่อนไหวของผู้ใช้แบบทุกชนิด (คลิกปุ่มไล่, คลิกแมวป่า, คลิกปุ่ม, ความเคลื่อนไหวของนิ้ว)

HTML Canvas สามารถใช้ในเกม

วิธีการเคลื่อนไหวของ Canvas มีหลายทางเลือกสำหรับใช้ในโปรแกรมเกม HTML

ตัวอย่าง Canvas

ใน 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>

ลองทดลองด้วยตัวเอง

บทบาทต่อไปจะนำเสนอวิธีการวาดภาพบนแผ่นฝีมือ。

โปรดดูเพิ่มเติม:

คู่มือเต็มเรื่อง Canvas ของ CodeW3C.com

การสนับสนุนของบราวเซอร์

<canvas> อิเล็มนต์เป็นมาตรฐาน HTML5 (2014)。

ทั้งหมดบราวเซอร์ทุกชุดทุกตัวสนับสนุน <canvas>：