ตัวอย่าง
<canvas> องค์ประกอบที่มี height และ width 200 พิกเซล
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
width แอตทริบิวต์ระบุความกว้างของ <canvas> องค์ประกอบพิกเซล
เคล็ดลับ: ใช้ height แอตทริบิวต์เพื่อระบุความสูงของ <canvas> องค์ประกอบพิกเซล
เคล็ดลับ: ในแต่ละครั้งที่มีความสูงหรือความกว้างของผืนผ้าใบเป็นอีกครั้งที่การตั้งค่าเนื้อหาผ้าใบจะถูกล้าง (ดูตัวอย่างด้านล่างของหน้า)
เคล็ดลับ: การเรียนรู้เพิ่มเติมเกี่ยวกับ <canvas> องค์ประกอบของเรา HTML สอนผ้าใบ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่แอตทริบิวต์
| คุณลักษณะ | |||||
|---|---|---|---|---|---|
| width | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
<canvas> แท็กใหม่ใน HTML5
วากยสัมพันธ์
<canvas width="pixels">
ค่าแอตทริบิวต์
| ความคุ้มค่า | ลักษณะ |
|---|---|
| pixels | ระบุความกว้างของผ้าใบพิกเซล (เช่น "100") ความกว้างเริ่มต้นคือ "300" |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ล้างผ้าใบโดยการตั้งค่า width หรือ height แอตทริบิวต์ (โดยใช้จาวาสคริปต์):
<canvas id="myCanvas" width="200" height="200" style="border:1px
solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx
= c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50,
100, 100);
function clearCanvas() {
c.height =
300;
}
</script> ลองตัวเอง»