我正在使用html
在我的游戏逻辑中,我使用canvas的
例如,下面的代码是我项目中的代码。当我弹出宽度和高度时,结果为875像素宽乘925像素高 - 正好是原始图像大小的四分之一。
针对视网膜显示器的常规解决方案是创建一个增大尺寸的图像,这样当iPad将其缩小时,一切都没问题。然而,根据上述报告的尺寸,我需要创建一个宽度和高度均为原图像4倍的图像。这将生成一个14,000像素宽、14,800像素高的图像。即使作为纯白色jpg格式,这个图像在Photoshop中也无法保存,并且在Gimp中被报告为1.9GB。显然这不是解决方案。 ;)
因此,我的问题仍然存在:有没有办法防止通过Javascript加载的图像在iPad视网膜显示器上被缩小?当我加载我的3500x3700像素图像时,我需要它保持在3500x3700像素的大小,以便我的context.drawImage()调用按预期工作。
欢迎提出任何想法。谢谢!
<canvas>
和javascript开发一个网页游戏。该游戏必须在iPad上运行,最好支持视网膜和非视网膜显示器。在游戏中,我使用了一个精灵图png。这个精灵图的宽度是3500像素,高度是3700像素。在我的游戏逻辑中,我使用canvas的
context.drawImage()
将精灵抓取并绘制到我的画布中。在桌面浏览器中,这完全没有问题,一切都很好。但在视网膜iPad上,图像仅以其大小的四分之一加载,这使得我的许多drawImage()
调用失败,因为它们试图抓取超出加载图像边界的像素。(如果我在位置1200、1400处抓取一个精灵,并且iPad认为我的图像比这小,那么就会抛出INDEX_SIZE_ERR错误。)例如,下面的代码是我项目中的代码。当我弹出宽度和高度时,结果为875像素宽乘925像素高 - 正好是原始图像大小的四分之一。
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。显然这不是解决方案。 ;)
因此,我的问题仍然存在:有没有办法防止通过Javascript加载的图像在iPad视网膜显示器上被缩小?当我加载我的3500x3700像素图像时,我需要它保持在3500x3700像素的大小,以便我的context.drawImage()调用按预期工作。
欢迎提出任何想法。谢谢!
.width()
和.height()
报告的宽度和高度。 - A. Degré