2

这是我第一次为移动设备开发 html5。我希望我的应用程序能够通用运行，因此它需要考虑到视网膜显示以及正常显示。

我正在运行这段代码，它在 iPhone3G（正常显示）和 iPhone5（视网膜显示）上看起来都很好：

function Setup(){

    $('canvas').css('width', window.innerWidth + 'px');
    $('canvas').css('height', window.innerHeight + 'px');

    if(window.devicePixelRatio == 2) {
        canvas.setAttribute('width', window.innerWidth * 2);
        canvas.setAttribute('height', window.innerHeight * 2);
        ctx.scale(2, 2);
    }
    else{
        canvas.setAttribute('width', window.innerWidth);
        canvas.setAttribute('height', window.innerHeight);
        ctx.scale(1, 1);
    }

    Draw();

}

我真的只是想知道我是否以正确的方式进行此操作？一切看起来都很好，但我不想在经过几天的工作和编码之后发现这是一种错误/坏的方法。

另外，我知道我需要 2 个版本的图像，例如：普通屏幕的 32x32 图像和视网膜的 64x64 图像，但我需要将该图像缩小 50%。正确的？

谢谢。

4

1 回答 1

0

ctx.scale可能会起作用，但可能会使您的图像看起来像狗屎。拉长。

当然，您可以使用视网膜大小的图像并按比例缩小，但随后您在非视网膜设备（例如 3gs）上增加了额外的工作量，这已经很慢了。

我使用的方法是这样的：

myCanvas.width = 300;
myCanvas.height = 300;

// you can use variables to get this value: width * window.devicePixelRatio
myCanvas.style.width = "600px";
myCanvas.style.height = "600px";

当然，您还需要通过 window.devicePixelRatio 缩放所有输入！

于 2013-04-12T01:09:08.430 回答