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またはそれに類するものに下がった。

ここで、画像のサイズを変更する方法を教えてください。

EDIT：私は、当然のことながら、このようなリアルタイムで画像のサイズを変更したくない：

context.drawImage(image, x, y, image.w*r, image.h*r); 

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

Answer 1

代わりの幅&高さの属性を設定し、代わりにCSSプロパティを設定します。あなたはJavascriptでの寸法を設定すると

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

、彼らは文字列として割り当てる必要があります。数字は機能しません。計算を行う必要がある場合は、結果を文字列に変換します。