0

だから、私はこのようないくつかの画像を作成します：

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

私の経験では、パフォーマンスが大幅に低下するためです。

4

2 に答える 2

2

幅と高さの属性を設定する代わりに、代わりに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 );
}
于 2012-04-06T16:21:12.070 に答える
1

Javascriptでディメンションを設定する場合は、文字列として割り当てる必要があります。数字は機能しません。計算を行う必要がある場合は、結果を文字列に変換します。

 images[i].width = (images[i].width*ratio).toString(); // newWidth/defaultWidth
 images[i].height = (images[i].height*ratio).toString();
于 2012-04-06T16:29:28.603 に答える