Question

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

在我的游戏逻辑中，我使用画布'context.drawImage()抓住精灵并将它们绘制到我的画布中。在桌面浏览器中，这非常好用，一切都很棒。在视网膜iPad上，图像加载的大小只有它的四分之一，这使我的许多drawImage()调用失败，认为他们试图抓住加载图像边界之外的像素。（如果我在1200,1400位置抓取一个精灵，并且iPad认为我的图像小于该值，则会抛出INDEX_SIZE_ERR错误。）

例如，下面编写的代码就是我在项目中的代码。在提示宽度和高度时，我得到875像素宽，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()调用按预期工作。

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

Answer 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 
}

如何在视网膜iPad上的javascript中防止@ 2x图像缩放？

1 个答案: