如何将字符串转换为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元素一起使用？

回答

相关问题