Question

我有一个考虑了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上都有。

Answer 1

自己找到答案。

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

解决方案 在致电

之前

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

呼叫

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

我花了2个小时才弄清楚了很多试错。希望它可以在同样的情况下帮助其他人。

使用drawImage（）考虑devicePixelRatio使图像看起来很棒，但文本，形状看起来很奇怪

1 个答案: