考虑到 devicePixelRatio 使用 drawImage() 使图像看起来很棒，但文本、形状看起来很奇怪答案

【问题标题】：using drawImage() considering devicePixelRatio makes image look great but text, shapes look strange考虑到 devicePixelRatio 使用 drawImage() 使图像看起来很棒，但文本、形状看起来很奇怪
【发布时间】：2015-06-18 20:47:50
【问题描述】：

我有一个考虑到 devicePixelRatio 的画布。

这使得文本和形状在所谓的视网膜显示器上看起来不错（文本清晰，形状更平滑等）。

这样做会使图像显示效果非常好，即 1000x500 的图像在 500x250 的画布上显示效果很好。很好。

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio);

但是，当这样做时，其余渲染的东西，即文本和形状看起来像是被渲染了两次，并且渲染一次但后来应该消失的东西（这是一个形状应该消失的游戏）留在画布上就像它完全出现故障一样。

这样做

ctx.drawImage(img, 0, 0, img.width, img.height)

使用 500x250 的图像会使图像有些模糊，就像网络上所有不考虑“2x”情况的图像一样，但其余形状和文本显示良好，逻辑现在按预期工作.

我可能犯了一个新手错误。有任何想法吗？谢谢。

编辑只是为了提供更多信息。在具有 1000x500 宽度 x 高度（但 css 为 500x250）的画布上使用 drawImage 确实不让我只使用具有 1000x500 尺寸的图像并渲染它而不分割它的高度和宽度具有 devicePixelRatio 的图像。这让我很困惑。为什么你仍然需要这样做

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)

做对了吗？

编辑 2 我知道你会感叹（如果你还在阅读），但这似乎实际上与渲染 PNG 图像有关。渲染 GIF 效果很好。 JPG也是如此。然而，PNG 存在一些实际问题。我无法弄清楚我做错了什么。图像周围有一个黑色边框（如果该信息有帮助），在渲染 png 时，也就是说，渲染的文本和其他内容看起来也有黑色边框；看起来很奇怪。在 Chrome 和 Safari 上都可以。

【问题讨论】：

您能告诉我们您是如何计算/设置画布大小的吗？一个活生生的例子（小提琴或内联）将是完美的，所以我们可以看到所采取的步骤，包括。图片/文字。
好吧，我自己解决了。谢谢你的减号，不管是谁给的。我希望 SO 不是这样一个精英主义的地方。问题在于 PNG 图像上的 alpha 通道，如果您在循环中显示它们，则框架需要首先清除上下文，例如 context.clearRect( 0, 0, canvasWidth, canvasHeight );否则它会将 PNG 绘制在 PNG 上太快，因此透明部分变得不透明，并且还会为您稍后在 PNG 上绘制的内容创建各种奇怪的效果，例如文本和形状。
为什么不创建一个答案并将其标记为已接受？这样这个问题就会结束。
是的。现在就这样做了。谢谢。

标签： html canvas drawimage retina

【解决方案1】：

自己找到了答案。

问题当您在画布上显示图像大小一半的 2x 图像时（为了使视网膜显示清晰的图像），只要您不显示 alpha 透明度设置为较低的 PNG 图像，一切都很好比不透明。

解决方案 打电话之前

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)

打电话

ctx.clearRect( 0, 0, canvasWidth, canvasHeight );

这花了我 2 个小时，经过大量的反复试验才弄清楚。希望它可以帮助处于相同情况的其他人。

【讨论】：