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

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

<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（）我可以使用？

來源

2012-04-18 Orb Hitter

使用字符串文字引用變量將導致錯誤，因爲它將計算爲字符串文字。

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 
}

來源

2012-04-18 18:52:35

+1是完全正確的。請注意，在這種情況下，可能不需要使用具有命名屬性的對象而不僅僅是一個數組：'var images = []; images [0] = document.querySelector（'＃person'）; （...）{ctx.drawImage（images [i]，...）; }' – Phrogz 2012-04-18 18:57:04

@Progrog非常真實;最簡單的解決方案有時會讓我失望。 – 2012-04-18 19:08:15

FWIW，無論何時有人試圖動態查找局部變量，將它們作爲命名條目存儲在對象中的建議_is_默認的第一個答案，所以這是完全可以理解的（並且在答案中有）。 – Phrogz 2012-04-18 19:10:04

我想你想做的事：

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

這需要你有與IDS object0，object1，object2圖像元素...

來源

2012-04-18 17:26:05

-1由於沒有看到OP已經有了一個不是「object0」的顯式ID。 – Phrogz 2012-04-18 18:57:26

我確實看到了。我認爲他還有其他圖像對象，並希望獲得這些對象，但不知道如何簡單地串聯一個字符串並在getElementById中使用它。 – 2012-04-18 19:22:09

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

來源

2012-04-18 17:30:32 fb55

正確，但這個答案實際上並沒有幫助顯然試圖動態構建參考的OP。 – Phrogz 2012-04-18 18:55:53

我有這樣的印象，這是一個類似於PHP的變量傳遞。但至少我很高興沒有人提出到目前爲止使用'eval' ... – fb55 2012-04-18 19:01:43

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

回答

相關問題