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

這不是實際的加載算法，但結果是一樣的：我剩下一個名為“圖像”的數組，其中當然包含一些圖像。

我正在制作游戲，我需要調整 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 或類似值。

現在，我 go 如何調整圖像大小？

編輯：當然，我不希望像這樣實時調整圖像大小：

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

Answer 2

當您在 Javascript 中設置維度時，它們應該被分配為字符串。 數字不起作用。 如果您需要進行計算，則將結果轉換為字符串。

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