如何调整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"; 

这不是实际的加载算法，但产品是一样的：我留下了所谓的“图像”的阵列的，当然，包含一些图像。

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

我最初的做法是这样的：

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