返回到：HTML canvas标签
本节课，我们学习HTML canvas标签的 width 属性。
定义和用法
width 属性返回 ImageData 对象的宽度，以像素计。
提示： 每当画布的高度或宽度被重设时，画布内容就会被清空（请看页面底部的例子）。
提示： 请在我们的 HTML Canvas 教程中学习更多有关 <canvas>的知识。
HTML 4.01 与 HTML 5 之间的差异
<canvas> 是 HTML5 中的新标签。
语法
<canvas width="pixels">属性值
| Value | Description |
|---|---|
| pixels | 指定 canvas 的 width属性, 以像素计(如”100″)。 默认 width 为 “300” |
实例
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/7476.html
支付宝 
微信 