javascript - Canvas 上的 document.getElementById 返回 null

Question

我是 javascript 的新手，正在学习它。在这样做的过程中，我遇到了这个我无法弄清楚的问题，我在这里寻求您的帮助。

这是我所在的页面，http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty

现在，当我在控制台 (firebug) 上运行以下命令时，它返回 null。

document.getElementById("myCanvas");

为什么我在这里没有得到预期的结果？

Answer 1

调用绘图函数时 DOM 已经加载，这是正确的。

但是 var canvas = document.getElementById('control');-line 在此之前被评估，因为它不在 draw-function 中。在呈现元素之前，它会立即在文档中执行。

我建议您将 init 函数更改为类似的东西

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');