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

【问题标题】：Update non-retina canvas app to retina display将非视网膜画布应用程序更新为视网膜显示
【发布时间】：2012-06-25 04:11:02
【问题描述】：

我有一个 iPad 2 画布应用程序（游戏），并希望让它在新的 iPad 视网膜显示屏上运行。

简单地说，对于视网膜 iPad 型号，拉伸/收缩 iPad2 图像的最佳方法是什么？

从我所做的谷歌搜索中，我看到了各种方法，但许多方法包括从视网膜大小的图像开始并完成缩放。

我还听说将 Retina 质量大小的像素推送到屏幕上的性能很慢，而且最好以牺牲一些质量为代价来使用 iPad 大小的图像。

就像现在一样，在新 iPad 上，我看到了我的应用程序的左上角，这是有道理的，但与 iPad 2 相比，性能令人震惊。

我见过的技术包括 CSS 媒体查询、使用像素密度和 CSS 转换 - 这显然非常快。

谢谢

【问题讨论】：

标签： javascript canvas html5-canvas retina-display

【解决方案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);
    }
}

【讨论】：

谢谢，我会试一试。仔细检查一下，这将适用于我当前尺寸（ipad2）的图像吗？我会告诉你进展如何。
已修复，我无法访问我的来源，所以我手动删除了。这适用于尚未通过其他方式针对 Retina 优化的画布。因此，如果它在您的桌面上运行良好，那么它也可以在您的 iPad 上运行良好，从而消除画布的模糊。
谢谢。这可以解决问题，但由于某种原因，ipad 视网膜上的性能非常慢（使用 xcode 模拟器）。但也许这是另一个话题。
完美，我希望我能给你买杯啤酒来表示感谢！