ตัวอย่าง
วาดจัตุรัสแดงในการบินและแสดงภายใน <canvas> องค์ประกอบ:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
ลองตัวเอง» ความหมายและการใช้งาน
<canvas> แท็กที่ใช้ในการวาดภาพกราฟิกในการบินผ่านสคริปต์ (มักจาวาสคริปต์)
<canvas> แท็กเป็นเพียงภาชนะสำหรับกราฟิกคุณต้องใช้สคริปต์เพื่อจริงวาดกราฟิก
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่องค์ประกอบ
| ธาตุ | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
<canvas> แท็กใหม่ใน HTML5
เคล็ดลับและคำอธิบาย
หมายเหตุ: ข้อความใด ๆ ภายใน <canvas> องค์ประกอบที่จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน <canvas>
เคล็ดลับ: การเรียนรู้เพิ่มเติมเกี่ยวกับ <canvas> องค์ประกอบของเรา HTML สอนผ้าใบ
เคล็ดลับ: สำหรับการอ้างอิงที่สมบูรณ์ของคุณสมบัติและวิธีการที่สามารถใช้กับวัตถุผ้าใบไปที่เรา HTML ผ้าใบอ้างอิง
แอตทริบิวต์
= ใหม่ใน HTML5
| คุณลักษณะ | ความคุ้มค่า | ลักษณะ |
|---|---|---|
| height | pixels | ระบุความสูงของผ้าใบ |
| width | pixels | ระบุความกว้างของผ้าใบ |
แอตทริบิวต์ทั่วโลก
<canvas> แท็กยังสนับสนุน แอตทริบิวต์ใน HTML
แอตทริบิวต์เหตุการณ์
<canvas> แท็กยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML
ตั้งค่าเริ่มต้น CSS
ไม่มี.