javascript - 如何调整 Javascript 图像的大小？

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”的数组，当然，其中包含一些图像。

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

我最初的方法是这样的:

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

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