HTML <canvas> 标签width属性

<canvas>标签width属性定义和用法

width属性指定<canvas>元素的宽度（以像素为单位）。
提示：使用height属性指定<canvas>元素的搞度（以像素为单位）。
提示：每次重新设置画布的高度或宽度时，都会清除画布内容（请参阅页面底部的示例）。
提示：了解有关HTML Canvas教程中 <canvas>元素的更多信息。

<canvas>标签width属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

9.0（含）以上	4.0（含）以上	2.0（含）以上	3.1（含）以上	9.0（含）以上

<canvas>标签width属性语法

<canvas>标签width属性实例

<!DOCTYPE html>
<html>
<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>

<p><strong>注意:</strong> 在IE8和更早的版本中不支持canvas标记。</p>

</body>
</html>

尝试一下

HTML4.01和HTML5之间的差异

<canvas>标签是HTML5中的新标签。

<canvas>标签width属性值

属性值	描述
pixels	指定画布的宽度(以像素为单位)。默认高度为“300”

更多例子

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">你的浏览器不支持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>

尝试一下