HTML <canvas> height 属性

HTML canvas 标签参考手册 HTML <canvas> 标签

高度和宽度为 200 像素的画布（<canvas>）：

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

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 height 属性。

注意： Internet Explorer 8 及更早IE版本不支持 <canvas> 标签。

定义和用法

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

提示： 每当画布的高度或宽度被重设时，画布内容就会被清空（请看页面底部的例子）。

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

HTML 4.01 与 HTML 5 之间的差异

<canvas> 是 HTML5 中的新标签。

语法

<canvas height="pixels">

属性值

Value Description
pixels 规定以像素计的 canvas 高度（比如 "100px" 或仅仅是 "100"）。默认是 "150"。

更多实例

清空画布 - 如何通过重设 width 或 height 属性来清空画布（使用 JavaScript）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
</head>
<body>

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
  <br>

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

  <button onclick="clearCanvas()">清空画布</button>

</body>
</html>

尝试一下 »

HTML canvas 标签参考手册 HTML <canvas> 标签