相关疑难解决方法(0)

我有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.内容使用300x300画布上的JavaScript绘制.

为什么会有显示差异？

我最近问了一个问题，如何在不裁剪的情况下将比画布大的图像绘制到画布上，并在对其进行一些更改后将图像保存回原始尺寸。我发现解决方案是为大于图像的画布设置内联height和width属性，并使用 cssheight和width属性来设置画布的样式以适应您的布局。

例如，假设我的图像尺寸范围在 400 像素到 2000 像素之间。但我不希望画布那么大，我也不希望图像也被裁剪（因为当用toDataURL画布上的内容保存图像时，保存的就是保存的内容）。这是有效的：

//style
#mycanvas{
    width: 400px;
    height: 400px;
}

<canvas id="mycanvas" width="2000" height="2000" />

这工作正常，我的图像效果很好。但是这种行为是否有问题并且将来一定会改变/修复？我打算将此解决方案用于手头的任务。

任何指导？