我有 2 个 Canvas ,一个使用 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 Canvas 上绘制的。
为什么会有显示差异?
最佳答案
似乎 width
和 height
属性决定了 Canvas 坐标系的宽度或高度,而 CSS 属性只决定了它所在的框的大小将显示出来。
这在 HTML specification 中有解释。 :
The
canvas
element has two attributes to control the size of the element’s bitmap:width
andheight
. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. Thewidth
attribute defaults to 300, and theheight
attribute defaults to 150.
关于css - 使用 CSS 时 Canvas 被拉伸(stretch),但使用 "width"/"height"属性正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2588181/