6

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

简而言之，为视网膜 iPad 型号拉伸/缩小我的 iPad2 图像的最佳方法是什么？

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

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

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

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

谢谢

4

1 回答 1

10

我整理了一个简单的函数来处理这个问题。基本上，它采用当前画布大小并按设备像素比对其进行缩放，然后使用 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);
    }
}
于 2012-06-22T22:21:01.873 回答