我有2个画布,一个使用HTML属性宽度和高度来调整它的大小,另一个使用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的画布上绘制。

为什么会有显示差异?


当前回答

要在画布上设置宽度和高度,您可以使用:

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

其他回答

width和height属性似乎决定了画布坐标系统的宽度或高度,而CSS属性只是决定了它将在其中显示的框的大小。

这在HTML规范中有解释:

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

如果你想要一个动态的行为,例如CSS媒体查询,不要使用画布的宽度和高度属性。使用CSS规则,然后,在获得画布渲染上下文之前,为width和height属性分配CSS width和height样式:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

CSS设置画布元素的宽度和高度,因此它会影响坐标空间,使所有内容都倾斜绘制

下面是我如何用Vanilla JavaScript设置宽度和高度的方法

canvas.width = numberForWidth

canvas.height = numberForHeight

如果你在CSS中设置了宽度和高度,画布将被拉伸。如果你想动态地操纵画布的尺寸,你必须像这样使用JavaScript:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Shannimal校正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))