使用 CSS 时画布被拉伸，但具有“宽度”/“高度”属性时正常

Question

我有 2 个画布，一个使用 HTML 属性 width 和 height 来调整大小，另一个使用 CSS：

 <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 像它应该的那样显示，但不是 compteur2。内容是使用 JavaScript 在 300x300 画布上绘制的。

为什么会有显示差异？

原文由 Sirber 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎 width 和 height 属性确定画布坐标系的宽度或高度，而 CSS 属性仅确定将在其中显示的框的大小。

这在 HTML 规范 中有解释：

canvas 元素有两个属性来控制元素位图的大小： width 和 height 。这些属性在指定时必须具有 有效的非负整 数值。必须使用 解析非负整数的规则 来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。 width 属性默认为 300，而 height 属性默认为 150。

原文由 SamB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要在画布上设置 width 和 height ，您可以使用：

 canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');

原文由 fermar 发布，翻译遵循 CC BY-SA 4.0 许可协议