我有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画布上绘制的。
为什么会有显示差异?
似乎width和height属性确定了画布坐标系的宽度或高度,而CSS属性仅确定了将在其中显示框的大小。
width
height
该canvas元素有两个属性来控制元素的位图的大小:width和height。指定这些属性时,它们的值必须是有效的非负整数。必须使用解析非负整数的规则来获取其数值。如果缺少属性,或者解析其值返回错误,则必须使用默认值。该width属性默认为300,该height属性默认为150。
canvas