Question

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

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

通过谷歌搜索，我已经看过各种各样的方法，但很多包括从视网膜大小的图像和缩放开始。

我也听说过将视网膜质量大小的像素推向屏幕的速度很慢，并且最好以牺牲一些质量为代价来使用iPad尺寸的图像。

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

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

由于

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);
    }
}

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

1 个答案: