ค่าทรัพย์สิน height ของ HTML <canvas>

HTML <canvas> แท็ก

คำอธิบายและการใช้งาน

height ค่าทรัพย์สินกำหนดความสูงของตัวแบบ <canvas> ด้วยหน่วยเปิดบาง

คำเตือน

ใช้ ค่าทรัพย์สิน width กำหนดความกว้างของตัวแบบ <canvas> ด้วยหน่วยเปิดบาง

ในทุกครั้งที่คุณตั้งค่าความสูงหรือความกว้างของหน้ากราฟฟิก สาระที่อยู่บนหน้ากราฟฟิกจะถูกล้าง (ดูตัวอย่างที่ด้านล่างหน้าเว็บไซต์)

โปรดดู ตัวอย่าง HTML Canvas เรียกข้อมูลเกี่ยวกับตัวแบบ <canvas> มากยิ่งขึ้น

ตัวอย่าง

ตัวอย่าง 1

ตัวแบบ <canvas> ขนาด 200 พิกเซลต่อทุกขอบเขต:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ด้วยการตั้งค่าความสูงของค่าทรัพย์สินเป็น 300px ที่จะล้างหน้ากราฟฟิก (ใช้ JavaScript):

<canvas id="myCanvas" width="400" height="400" 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.height = 400;
}
</script>

ทดลองด้วยตัวเอง

รูปแบบ

<canvas height="pixels">

ค่าของอุปกรณ์

ค่า รายละเอียด
pixels กำหนดความสูงของแผงกราฟิก ด้วยพิกเซล (เช่น “100”) ค่าเริ่มต้นคือ 150。

การสนับสนุนบราวเซอร์

ตัวเลขในตารางระบุสัปดาห์ที่บราวเซอร์เรียกเกี่ยวกับการสนับสนุนคุณสมบัติ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0

HTML <canvas> แท็ก