Question

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

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);

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

Answer 1

而不是设置宽度和宽度height属性，改为设置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 );
}

Answer 2

在Javascript中设置尺寸时，应将它们指定为字符串。数字不起作用。如果需要进行计算，请将结果转换为字符串。

 images[i].width = (images[i].width*ratio).toString(); // newWidth/defaultWidth
 images[i].height = (images[i].height*ratio).toString();

如何调整Javascript图像的大小？

2 个答案: