0

所以，我创建了一些这样的图像：

images = [];

images[0] = new Image();
images[0].src = "bla.jpg";

images[1] = new Image();
images[1].src = "bla1.jpg";

images[2] = new Image();
images[2].src = "bla2.jpg";

这不是实际的加载算法，但产品是相同的：我留下了一个名为“images”的数组，其中当然包含一些图像。

我正在制作一个游戏，我需要调整画布的大小，以适应玩家的屏幕大小。我知道该怎么做，但现在，我还需要调整所有图像的大小。我不知道该怎么做。

我最初的方法是这样的：

for (var i = 0; i < images.length; i ++)
{
    images[i].width *= ratio; // newWidth/defaultWidth
    images[i].height *= ratio;
}

不过，我没有注意到变化，所以我这样做了，只是为了确定：

for (var i = 0; i < images.length; i ++)
{
    images[i].width = 3; //I'd probably notice if every image in the game was shrunk to this size
    images[i].height = 3;
}

这更奇怪了。图像再次保持不变，但是游戏速度变慢了很多。FPS 下降到 0.5 或类似的东西。

现在，我该如何调整图像大小？

编辑：当然，我不希望像这样实时调整图像大小：

context.drawImage(image, x, y, image.w*r, image.h*r);

因为根据我的经验，它大大降低了性能。

4

2 回答 2

2

不要设置宽度和高度属性，而是设置 css 属性：

var i, image;
for ( i = 0; i < images.length; i++ )
{
    image = $( images[i] );
    image.css( 'width', image.width() * ratio );
    image.css( 'height', image.height() * ratio );
}
于 2012-04-06T16:21:12.070 回答
1

当您在 Javascript 中设置尺寸时，它们应该被指定为字符串。数字是行不通的。如果您需要进行计算，则将结果转换为字符串。

 images[i].width = (images[i].width*ratio).toString(); // newWidth/defaultWidth
 images[i].height = (images[i].height*ratio).toString();
于 2012-04-06T16:29:28.603 回答