如何調整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();