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

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