Question

我正在尝试使用HTML5 canvas进行2D游戏。所以我要做的是为js定义画布

var canvas = document.getElementById('gamecanvas');

当我把这句话放在<canvas>标签之后时，代码效果很好。但是当我将脚本放在head标记的script标记内时（在编写<canvas>标记之前，它会给我错误

ncaught TypeError: Cannot read property 'getContext' of null

这是因为画布未在js代码之前“声明”，因为JS逐行读取代码。

但是，此tutorial在编写canvas标记之前编写了代码。怎么会发生这种情况。

还有一个问题，为什么JS在声明之前使用函数时没有出现任何错误？它应该不一样吗？

Answer 1

但是，本教程在编写canvas标记之前编写了代码。怎么会发生这种情况。

在将元素添加到DOM之前，它不会运行代码。

代码在函数中。响应load事件调用该函数。

还有一个问题，为什么JS在声明之前使用函数时不会出现任何错误？它应该不一样吗？

函数声明需要提升（这实际上意味着它们是在编译时而不是运行时发现的）。

Answer 2

在页面准备好之前，不要执行引用DOM元素的代码。要在页面准备就绪后调用函数：

<body onload="doSomething()">

函数doSomething（）当然可以在它引用的元素之前出现在页面上，只要该函数仅在元素位于DOM之后执行。

Answer 3

我知道如何解决这个问题的3个解决方案。最容易和最好的是（正如上面已经写过的人）

<body onload="doSomething()">

因为html正在从页面顶部加载代码到底部，所以可以预测首先会加载javascript，他的功能会做什么，他们要做什么，找到ID，但是如何，什么时候页面还没有加载。上面的onload函数将在加载整个主体后执行你输入的函数。

另一种方法是将<script>标记放到页面的末尾，以便将javascript作为最后一个加载。或者如果你对Jquery开放，jquery的基本功能

$(document).ready(function(){ ... TO DO ...});

也会这样做。