使用css样式覆盖Canvas内联高度和宽度属性。这是一个错误吗?

时间:2012-12-08 16:33:22

标签: canvas html5-canvas image-scaling

我最近asked a question介绍了如何将大于画布的图像绘制到画布上而不进行裁剪,并在对图像执行某些更改后将图像保存回原始尺寸。我发现解决方案是为画布设置大于图像的内联heightwidth属性,并使用css heightwidth属性来设置画布的样式以使其适合进入你的布局。

例如,假设我的图像尺寸范围在400px到2000像素之间。但我不希望画布如此大,我也不希望图像被裁剪(因为当用toDataURL保存图像时,画布上的内容就是保存的内容)。这是有效的:

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

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

这很好用,我的图像很好。 但这种行为是否有缺陷并且将来必然会被修改/修复?我打算将此解决方案用于手头的任务。

任何指导?

1 个答案:

答案 0 :(得分:4)

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

  • 解析的属性
  • 用于拉伸/收缩的CSS

请参阅Canvas width and height in HTML5