返回到：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>）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#92B901";
ctx.fillRect(50,50,100,100);
</script>
</body>
</html>2、清空画布
如何通过重设 width 或 height 属性来清空画布（使用 JavaScript）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.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标签
作者：terry，如若转载，请注明出处：https://www.web176.com/html_element/7471.html
支付宝 
微信 