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

标签 canvas html5-canvas image-scaling

我最近asked a question关于如何在不裁剪的情况下将比我的 Canvas 更大的图像绘制到 Canvas 上,并在对其进行一些更改后将图像保存回其原始尺寸。我发现解决方案是设置内联 heightwidth Canvas 大于图像的属性,并使用 css heightwidth属性来设置 Canvas 的样式以适合您的布局。

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

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

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

这很好用,我的图像效果很好。
但是这种行为是否存在问题并且将来一定会被更改/修复?我打算将此解决方案用于手头的任务。

有什么指导吗?

最佳答案

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

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

  • Canvas width and height in HTML5 .

    关于用 css 样式覆盖的 Canvas 内联高度和宽度属性。这是一个错误吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13779429/

    相关文章:

    javascript - JS canvas 无意中拉伸(stretch)div

    javascript - 删除或隐藏前一帧中的图像 - html 5 canvas

    javascript - Canvas getImageData 但按比例缩小

    delphi - 绘制透明缩放PNG

    html - SVG 属性矢量效果 ="non-scaling-stroke"仍然缩放笔画

    canvas - 使用 raphael.js 直接进行 Canvas 平移

    javascript - 两个不同的计算和绘图循环

    javascript - 计算 AnalyserNode 的 smoothingTimeConstant

    rust - 在 WebAssembly/Rust 中编辑 Canvas 像素数据