HTML <canvas> height 属性

HTML <canvas> 标签

定义和用法

height 属性规定 <canvas> 元素的高度，以像素为单位。

提示

请使用 width 属性 指定 <canvas> 元素的宽度，以像素为单位。

每次重设画布的高度或宽度时，画布内容将被清除（请参见页面底部的例子）。

请在我们的 HTML Canvas 教程 中学习有关 <canvas> 元素的更多知识。

实例

例子 1

高度和宽度均为 200 像素的 <canvas> 元素：

<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> 标签