文字列をcanvas要素で使用するDOM要素に変換するにはどうすればよいですか？

Question

HTML：

<img src="person.png" id="person"/> 

はJavaScript：

var object0 = document.getElementById("person"); 
var i = 0; 

context.drawImage(object0, object0X, object0Y);// this works 

context.drawImage("object" + i, object0X, object0Y);// this doesn't 

エラーメッセージ：私はエラーが出る理由は、それはDOM要素でなければならないことであることをどこかで読ん

Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage] 

、文字列ではありません。さて、私はforループを実行する必要があるので、私は画面上のいくつかのオブジェクトに影響を与えることができ、したがっていくつかの連結を行う必要があります。私が使用できるparseInt（）に類似したものがありますか？

私はあなたがやりたいと思う

Answer 1

文字列リテラルを使用して変数を参照すると、文字列リテラルに評価されるため、エラーが発生します。

var Object0 = document.getElementById('person'); // typeof 'object' 
console.log(typeof ('Object' + i)); // This will output 'string' to the console 

代わりに、プロパティがDOM要素への参照を保持するオブジェクトを作成できます。

var images = { 
    Object0: document.getElementById('person') 
    // and so forth... 
}; 

これは、ブラケット表記を使用して各プロパティを参照できるため、非常に便利です。これで、forループを使用してプロパティをループし、値にアクセスできます。 OPは既に "object0"ではない明示的なIDを持っていないことを見ていないため、

for (var i = 0; i < images.length; i++) { 
    context.drawImage(images['Object' + i], Object0X, Object0Y); // This works 
    console.log(typeof images['Object' + i]); // This will output 'object' to the console 
} 

Answer 2

：

あなたがIDS object0と画像要素、 object1、 object2を持っていることを必要とするであろう

context.drawImage(document.getElementById("object" + i), object0X, object0Y);

...

Answer 3

あなたはJS変数を参照することはできません文字列を介して。このエラーは、イメージへの参照ではなく、文字列をdrawImage関数に渡すことに起因します。関数に変数を渡すだけで動作します。