如何将字符串转换为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函数，而不是对图像的引用。 只需将变量传递给函数即可。