如何调整Javascript图像的大小

How to resize Javascript images?

本文关键字：图像 Javascript 何调整 调整      更新时间：2023-09-26

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

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

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

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

当您在Javascript中设置维度时，它们应该被分配为字符串。数字是行不通的。如果需要进行计算，请将结果转换为字符串。

 images[i].width = (images[i].width*ratio).toString(); // newWidth/defaultWidth
 images[i].height = (images[i].height*ratio).toString();
相关文章：