将非Retina画布应用更新为Retina显示

Question

我有一个iPad2画布应用程序（游戏），想让它在新的iPad视网膜显示屏上运行。简单地说，最好的方法是如何拉伸/缩小我的iPad2图像以适应视网膜iPad型号？

根据我所查到的谷歌信息，我看到了各种方法，但很多方法都包括从视网膜大小的图像开始进行缩放。

我还听说将高清晰度像素推送到屏幕会影响性能，并且使用iPad大小的图像会牺牲一些质量，但效果比较好。

就目前而言，在新的iPad上，我只能看到我的应用程序左上角的四分之一，这是有道理的，但性能与iPad 2相比令人震惊。

我所看到的技术包括CSS媒体查询、使用像素密度和CSS转换——这些方法是非常快速的。

谢谢！

- Jarrod

Answer 1

我编写了一个简单的函数来处理这个问题。基本上，它获取当前画布大小并按设备像素比例缩放，然后使用CSS将其缩小回去。然后通过比例缩放上下文，以便所有原来的函数像往常一样工作。

你可以尝试一下，看看性能如何。如果不是你期望的结果，你可以将其删除。

function enhanceContext(canvas, context) {
    var ratio = window.devicePixelRatio || 1,
        width = canvas.width,
        height = canvas.height;

    if (ratio > 1) {
        canvas.width = width * ratio;
        canvas.height = height * ratio;
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        context.scale(ratio, ratio);
    }
}

- Brian Nickel

---

谢谢，我会尝试一下。只是再确认一下，这个可以用于我的当前尺寸（iPad2）的图片吗？我会告诉你结果的。 - Jarrod

修复了，我没有访问我的源代码，所以我手动进行了反混淆。这对于尚未通过其他方式进行视网膜优化的画布有效。因此，如果在您的桌面上正常工作，则在iPad上也将正常工作，并消除画布的模糊。 - Brian Nickel

谢谢。这个方法可以解决问题，但在iPad Retina上（使用Xcode模拟器）性能非常慢，原因不明。也许那是另一个话题。 - Jarrod

完美，我希望我能请你喝一杯啤酒来表达感谢之意！ - Brett Gregson