Javascript 将非视网膜画布应用程序更新为视网膜显示

我有一个iPad2画布应用程序（游戏），我想让它在新的iPadRetina显示屏上运行

简单地说，对于retina iPad机型，拉伸/收缩我的iPad2图像的最佳方法是什么

通过谷歌搜索，我看到了各种各样的方法，但很多方法都包括从视网膜大小的图像开始，然后进行缩放

我还听说，将视网膜质量大小的像素推到屏幕上的速度很慢，最好是以牺牲一些质量为代价使用iPad大小的图像

现在，在新的iPad上，我看到了我的应用程序左上角的四分之一，这是有道理的，但与iPad2相比，性能令人震惊

我见过的技术包括CSS媒体查询、使用像素密度和CSS转换，它们显然相当快

---

谢谢

我编写了一个简单的函数来处理这个问题。基本上，它采用当前画布大小，并根据设备像素比例进行缩放，使用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);
    }
}

---

谢谢，我来试一试。只需再次检查，这将与我的当前大小（ipad2）图像工作？我会让你知道情况的。修复了，我无法访问我的来源，所以我手动清除了。这将适用于尚未通过其他方法优化视网膜的画布。因此，如果它在你的桌面上运行良好，它将在你的iPad上运行良好，消除画布上的诱惑。谢谢。这确实起到了作用，但由于某些原因，ipadretina（使用xcode模拟器）的性能非常慢。但也许这是另一个话题。太好了，我希望我能给你买杯啤酒来表达感谢！