ลักษณะ width ของ HTML <canvas>
คำอธิบายและวิธีใช้
width ลักษณะ width กำหนดความกว้างของตัวแบบ <canvas> ด้วยหน่วยเป็นพิกเซล。
คำเตือน
ใช้ ลักษณะ height ตั้งค่าความสูงของตัวแบบ <canvas> ด้วยหน่วยเป็นพิกเซล。
เมื่อตั้งค่าความสูงหรือความกว้างของกระดาษวาดใหม่ ทุกสิ่งที่อยู่บนกระดาษวาดจะถูกล้าง (ดูตัวอย่างที่ด้านล่างของหน้า)
กรุณาเลือก HTML Canvas ต่อรอง เรียนรู้เกี่ยวกับตัวแบบ <canvas> มากยิ่งขึ้นในความรู้ของคุณ。
ตัวอย่าง
ตัวอย่าง 1
ตัวแบบ <canvas> ขนาด 200 พิกเซลต่อทุกทิศทาง:
<canvas id="myCanvas" width="400" height="400" style="border:1px solid">
ตัวอย่าง 2
ด้วยการตั้งค่าค่าลักษณะ width ให้เป็น 400px เพื่อล้างกระดาษวาด (ใช้ JavaScript):
<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 = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
c.width = 400;
}
</script>
การเขียน
<canvas width="pixels">
ค่าของอาตริบิวต
| ค่า | การอธิบาย |
|---|---|
| pixels | กำหนดความกว้างของแผ่นกราฟิกด้วยพิกเซล (เช่น “100”) ค่าเริ่มต้นคือ 300 |
การสนับสนุนโดยเบราเซอร์
ตัวเลขในตารางบอกว่าเวอร์ชั่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
