toDataURL返回错误“未捕获的TypeError：无法读取未定义的属性'0'”

Question

我是javascript的新手，我遇到了错误。我确定我正在跳过一些基本概念...抱歉。

这是问题所在。

我在我的html上使用这段代码：

<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

</script></div>

我的文档上只有一个画布。我在chrome中看到的错误是：

Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)

如果我输入

document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

在java脚本chrome控制台中

（完全相同的一行），它的工作原理！这怎么可能？

Answer 1

您忘记了[0]：

var myCanvas = document.getElementsByTagName("canvas")[0];

getElementsByTagName返回一个元素数组，你必须从中选择一个。 （即使数组只包含1个元素）

执行此操作的“更干净”方法是在画布上设置id（id="myCanvas"）并使用getElementById，但由于您只使用1个画布，{{1}会工作。

它返回getElementsByTagName的原因可能是你的代码是在加载画布之前执行的 将代码包装在函数中，然后将函数注册到“load”事件

undefined