javascript - 将非视网膜 Canvas 应用程序更新为视网膜显示

Question

我有一个 iPad 2 canvas 应用程序(游戏)，我想让它在新的 iPad 视网膜显示屏上运行。

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

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

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

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

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

谢谢

Answer 1

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