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