Canvas 画布内联高度和宽度属性被css样式覆盖。这是虫子吗？

我最近讨论了如何在画布上绘制比画布大的图像而不进行裁剪，并在对图像执行一些更改后将其保存回原始尺寸。我发现解决方案是为比图像大的画布设置内联

高度

和

宽度

属性，并使用css

高度

和

宽度

属性设置画布样式以适合您的布局

例如，假设我的图像的尺寸在400px到2000px之间。但是我不希望画布太大，也不希望图像被裁剪（因为当使用

toDataURL

保存图像时，画布上的内容就是保存的内容）。这就是工作原理：

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

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

//风格
#我的画布{
宽度：400px；
高度：400px；
}

这个效果很好，我的图像效果也很好。 但是，这种行为是否有缺陷，将来一定会改变/修复？我计划将此解决方案用于手头的任务

---

有什么指导吗？

此行为通常用于控制画布的大小：

• 分辨率属性
• 用于拉伸/收缩的CSS

请参阅。

我知道这个问题已经问了很久了，但我还有另一个解决方案可以使用

您可以尝试使用该函数，在将图像绘制到画布时调整图像大小

语法：

void ctx.drawImage（image，dx，dy，dWidth，dHeight）


dx和dy是目标画布的x和y坐标
dWidth和dHeight是在画布上绘制图像的尺寸

（如果您知道画布和图像的大小，您可以计算这些值需要是多少）
Aha。。。我认为它的安全使用它的生活目的！谢谢