HTML <canvas> width 属性

定义和用法

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

提示

请使用 height 属性 指定 <canvas> 元素的高度,以像素为单位。

每次重设画布的高度或宽度时,画布内容将被清除(请参见页面底部的例子)。

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

实例

例子 1

高度和宽度均为 200 像素的 <canvas> 元素:

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

亲自试一试

例子 2

通过将 width 属性设置为 400px 来清除画布(使用 JavaScript):

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);

function clearCanvas() {
  c.width = 400;
}
</script>

亲自试一试

语法

<canvas width="pixels">

属性值

描述
pixels 规定画布的宽度,以像素计(例如“100”)。默认值为 300。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0