Canvas 标签属性与 CSS 样式设置宽高的区别

问题

Canvas 在标签上设置 width/height 属性，与在 style 中设置宽高有什么区别？

解答

Canvas 的宽高设置分为两个层面：

标签属性设置（width/height）

这是画布的实际分辨率，决定了绘图区域的像素数量。所有绘制操作都基于这个尺寸。

<canvas width="600" height="400"></canvas>

CSS 样式设置（style）

这是 Canvas 元素在页面中的显示尺寸，浏览器会将画布内容缩放到这个尺寸。

<canvas width="600" height="400" style="width: 300px; height: 200px;"></canvas>

上面的例子中，画布实际是 600×400 像素，但在页面中显示为 300×200 像素，内容会被缩小显示。

默认值

如果不设置 width 和 height 属性，Canvas 默认为 300×150 像素。

<!-- 默认 300×150 像素 -->
<canvas></canvas>

关键点

• width/height 属性控制画布的实际像素尺寸（绘图分辨率）
• style 样式控制 Canvas 在页面中的显示尺寸
• 两者不一致时会产生缩放效果，可能导致图像模糊
• Canvas 默认尺寸为 300×150 像素
• 建议始终显式设置标签属性，避免使用默认值