HTML <ผ้าใบ> แอตทริบิวต์ความกว้าง
ตัวอย่าง
<canvas> องค์ประกอบที่มีความสูงและความกว้าง 200 พิกเซล:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แอตทริบิวต์widthระบุความกว้างของ
<canvas>องค์ประกอบในหน่วยพิกเซล
เคล็ดลับ:ใช้height
แอตทริบิวต์เพื่อระบุความสูงของ
<canvas>องค์ประกอบเป็นพิกเซล
เคล็ดลับ:ทุกครั้งที่มีการตั้งค่าความสูงหรือความกว้างของผืนผ้าใบใหม่ เนื้อหาผ้าใบจะถูกล้าง (ดูตัวอย่างที่ด้านล่างของหน้า)
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับ
<canvas>องค์ประกอบใน
HTML Canvas Tutorialของเรา
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนแอตทริบิวต์อย่างเต็มที่
| Attribute | |||||
|---|---|---|---|---|---|
| width | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ไวยากรณ์
<canvas width="pixels">
ค่าแอตทริบิวต์
| Value | Description |
|---|---|
| pixels | Specifies the width of the canvas, in pixels (e.g. "100"). Default value is 300 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ล้างผ้าใบโดยการตั้งค่าแอตทริบิวต์ width หรือ height (โดยใช้ 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 = "#92B901";
ctx.fillRect(50, 50, 100, 100);
function clearCanvas() {
c.height = 300;
}
</script>
❮ แท็ก HTML <canvas>