7

我正在使用 html<canvas>和 javascript 开发网络游戏。游戏还必须在 iPad 上正常运行,最好是视网膜和非视网膜显示器。在这个游戏中,我使用了一个 spritesheet png。这个 spritesheet 宽 3500 像素,高 3700 像素。

在我的游戏逻辑中,我使用 canvas'context.drawImage()来抓取精灵并将它们绘制到我的画布中。在桌面浏览器中,这工作得非常好,一切都很好。在视网膜 iPad 上,图像仅以四分之一大小加载,这使我的许多drawImage()调用都失败了,以为他们试图抓取加载图像边界之外的像素。(如果我在位置 1200、1400 抓取一个精灵,并且 iPad 认为我的图像比这小,则会引发 INDEX_SIZE_ERR 错误。)

例如,下面写的代码就是我项目中的代码。当提醒宽度和高度时,我得到的结果是 875 像素宽 x 925 像素高 - 正好是原始图像大小的 1/4。

spritesheet = new Image();
spritesheet.onload = function() {
    splashInterval = setInterval(renderFrame, 30);
    alert(spritesheet.width); // returns 875 on retina iPad
    alert(spritesheet.height); // returns 925 on retina iPad
};
spritesheet.src = "/spritesheet.png";

对于视网膜显示器,通常的解决方案是创建一个尺寸增加的图像,因此当 iPad 缩小它时,一切都很好。但是,按照上面报告的尺寸,我必须创建一个宽度和高度为 4 倍的图像。这使得图像的宽度为 14,000 像素,高度为 14,800 像素。即使是纯白色 jpg,此图像也无法在 Photoshop 中保存,并且在 Gimp 中报告为 1.9GB 大。这自然不是解决办法。;)

因此我的问题是:有没有办法防止 iPad 视网膜显示器缩小通过 Javascript 加载的图像?当我加载我的 3500x3700 像素图像时,我需要它保持在 3500x3700 像素,所以我的context.drawImage()调用按预期工作。

任何和所有的想法将不胜感激。谢谢!

4

1 回答 1

1

您可以使用以下方法确定显示器是否为视网膜:

var retina = window.devicePixelRatio > 1 ? true : false;

if (retina) {
    // the user has a retina display
    // do something

}
else {
    // the user has a non-retina display
    // do something else 
}
于 2012-07-19T16:31:13.157 回答