ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

HTML สอนผ้าใบ


เบราว์เซอร์ของคุณไม่สนับสนุน <canvas> องค์ประกอบ

ใช้ 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>
ลองตัวเอง»

บทต่อไปแสดงวิธีการวาดภาพบนผืนผ้าใบ