使用 drawImage() 考虑 devicePixelRatio 使图像看起来很棒但文本、形状看起来很奇怪
using drawImage() considering devicePixelRatio makes image look great but text, shapes look strange
我有一个 canvas 考虑了 devicePixelRatio。
这使得文本和形状在所谓的视网膜显示器上看起来很好（文本清晰，形状更平滑等）。
这样做会使图像显示效果非常好，即 1000x500 图像在 500x250 canvas 上显示效果很好。很好
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio);
然而，当这样做时，其余渲染的东西，即文本和形状看起来像是被渲染了两次，而渲染一次但稍后应该消失的东西（这是一个形状应该消失的游戏）保持不变canvas 好像完全出故障了。
这样做
ctx.drawImage(img, 0, 0, img.width, img.height)
使用 500x250 的图像会使图像有些模糊，就像网络上所有未考虑“2x”情况的图像一样，但其余的形状和文本显示正常并且逻辑现在可以正常工作不出所料。
我可能犯了一个新手错误。有任何想法吗？谢谢
编辑 只是为了提供更多信息。在具有 1000x500 宽度 x 高度（但 css 为 500x250）的 canvas 上使用 drawImage 确实 而不是 让我只使用具有 1000x500 尺寸的图像并在不将该图像的高度和宽度除以 devicePixelRatio 的情况下进行渲染。这让我很困惑。为什么你还需要做
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)
做对了吗？
编辑 2
我知道您会感叹（如果您还在阅读的话）但这似乎实际上与渲染 PNG 图像有关。渲染 GIF 效果很好。和 JPG 一样。然而，PNG 有一些实际问题。我不知道我做错了什么。在渲染 png 时，图像周围有黑色边框（如果该信息有帮助的话），也就是说，渲染的文本和其他内容看起来也有黑色边框；看起来很奇怪。 Chrome 和 Safari 都支持。
自己找到了答案。
问题
当你在 canvas 上显示一个 2x 图像时，它是图像大小的一半（为了让视网膜显示一个清晰的图像），只要你不显示带有 alpha 的 PNG 图像，一切都很好透明度设置为低于不透明。
解决方案
调用前
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)
通话
ctx.clearRect( 0, 0, canvasWidth, canvasHeight );
我花了 2 个小时才弄清楚，并进行了大量的反复试验。希望它能帮助处于相同情况的其他人。
我有一个 canvas 考虑了 devicePixelRatio。
这使得文本和形状在所谓的视网膜显示器上看起来很好（文本清晰，形状更平滑等）。
这样做会使图像显示效果非常好，即 1000x500 图像在 500x250 canvas 上显示效果很好。很好
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio);
然而，当这样做时，其余渲染的东西，即文本和形状看起来像是被渲染了两次，而渲染一次但稍后应该消失的东西（这是一个形状应该消失的游戏）保持不变canvas 好像完全出故障了。
这样做
ctx.drawImage(img, 0, 0, img.width, img.height)
使用 500x250 的图像会使图像有些模糊，就像网络上所有未考虑“2x”情况的图像一样，但其余的形状和文本显示正常并且逻辑现在可以正常工作不出所料。
我可能犯了一个新手错误。有任何想法吗？谢谢
编辑 只是为了提供更多信息。在具有 1000x500 宽度 x 高度（但 css 为 500x250）的 canvas 上使用 drawImage 确实 而不是 让我只使用具有 1000x500 尺寸的图像并在不将该图像的高度和宽度除以 devicePixelRatio 的情况下进行渲染。这让我很困惑。为什么你还需要做
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)
做对了吗？
编辑 2 我知道您会感叹（如果您还在阅读的话）但这似乎实际上与渲染 PNG 图像有关。渲染 GIF 效果很好。和 JPG 一样。然而，PNG 有一些实际问题。我不知道我做错了什么。在渲染 png 时，图像周围有黑色边框（如果该信息有帮助的话），也就是说，渲染的文本和其他内容看起来也有黑色边框；看起来很奇怪。 Chrome 和 Safari 都支持。
自己找到了答案。
问题 当你在 canvas 上显示一个 2x 图像时，它是图像大小的一半（为了让视网膜显示一个清晰的图像），只要你不显示带有 alpha 的 PNG 图像，一切都很好透明度设置为低于不透明。
解决方案 调用前
ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio)
通话
ctx.clearRect( 0, 0, canvasWidth, canvasHeight );
我花了 2 个小时才弄清楚，并进行了大量的反复试验。希望它能帮助处于相同情况的其他人。