HTMLCanvasElement: width 属性
HTMLCanvasElement.width 属性是一个正整数，反映了 width HTML 属性在 CSS 像素中解释的 <canvas> 元素。当未指定该属性，或者其值无效（例如负数）时，将使用默认值 300。
设置 width 属性会重置整个渲染上下文为其默认状态。这包括清除画布（后端缓冲区）、重置当前路径，以及重置所有属性，如 fillStyle 和 globalCompositeOperation。这种重置对所有上下文类型都会发生，即使设置 width 为其当前值时也会发生。要在更改宽度后恢复之前的画布内容，请使用 CanvasRenderingContext2D.getImageData() 和 CanvasRenderingContext2D.putImageData()。上下文属性必须单独跟踪和恢复。
这是两个控制画布尺寸的属性之一，另一个是 HTMLCanvasElement.height。
值
一个数字。
示例
给定此 <canvas> 元素
html
<canvas id="canvas" width="300" height="300"></canvas>
您可以使用以下代码获取画布的宽度
js
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
规范
| 规范 |
|---|
| HTML # dom-canvas-height |
浏览器兼容性
加载中…
另见
HTMLCanvasElement：定义HTMLCanvasElement.width属性的接口HTMLCanvasElement.height：用于控制画布尺寸的另一个属性HTMLEmbedElement.widthHTMLIFrameElement.widthHTMLImageElement.widthHTMLObjectElement.widthHTMLSourceElement.widthHTMLVideoElement.width