返回到：HTML canvas标签
本节课，我们学习HTML canvas标签的 height 属性。
定义和用法
height 属性规定 <canvas> 元素的高度, 以像素为单位。
提示： 每当画布的高度或宽度被重设时，画布内容就会被清空（请看页面底部的例子）。
提示： 请在我们的 HTML Canvas 教程中学习更多有关 <canvas>的知识。
HTML 4.01 与 HTML 5 之间的差异
<canvas> 是 HTML5 中的新标签。
语法
<canvas height="pixels">属性值
| Value | Description |
|---|---|
| pixels | 规定以像素计的 canvas 高度（比如 “100px” 或仅仅是 “100”）。默认是 “150”。 |
浏览器兼容
所有主流浏览器都支持 height 属性。
注意： Internet Explorer 8 及更早IE版本不支持 <canvas> 标签。
实例
1、高度和宽度为 200 像素的画布（<canvas>）：
HTML
x
21
21
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">10
您的浏览器不支持 HTML5 canvas 标签。11
</canvas>12
13
<script>14
var c=document.getElementById("myCanvas");15
var ctx=c.getContext("2d");16
ctx.fillStyle="#92B901";17
ctx.fillRect(50,50,100,100);18
</script>19
20
</body>21
</html>2、清空画布
如何通过重设 width 或 height 属性来清空画布（使用 JavaScript）。
HTML
xxxxxxxxxx1
28
28
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">10
您的浏览器不支持 HTML5 canvas 标签。11
</canvas>12
<br>13
14
<script>15
var c=document.getElementById("myCanvas");16
var ctx=c.getContext("2d");17
ctx.fillStyle="#92B901";18
ctx.fillRect(50,50,100,100);19
function clearCanvas()20
{21
c.height=300;22
}23
</script>24
25
<button onclick="clearCanvas()">清空画布</button>26
27
</body>28
</html>返回到：HTML canvas标签
阅读剩余 70%
作者：terry，如若转载，请注明出处：https://www.web176.com/html_element/7471.html
支付宝 
微信 