如何將字符串轉換為DOM元素以與canvas元素一起使用？

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

錯誤信息：

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

我在某處讀到了我得到錯誤的原因是它必須是一個DOM元素，而不是一個字符串。 好吧，我需要運行一個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循環遍歷屬性並訪問值; 像這樣：

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

我想你想做：

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

這將要求你有圖像元素與ids object0 ， object1 ， object2 ...

Answer 3

您不能通過字符串引用JS變量。 錯誤源於將字符串傳遞給drawImage函數，而不是對圖像的引用。 只需將變量傳遞給函數即可。