外部文件中的Canvas脚本

Question

我的HTML5代码中有一个简单的Canvas元素，并试图用外部javascript文件绘制它。

<script src="script.js" type="text/javascript"></script>
<canvas id="can1" width="50px" height="50px"></canvas>

//script.js:
var can1 = document.getElementById("play");
var can1Context = play.getContext("2d");
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

但是这不起作用，但是如果脚本与Canvas Element在同一个文件中，它就可以工作。有人可以向我解释一下吗？

Answer 1

将其更改为

<canvas id="play" width="50px" height="50px"></canvas>
<!--        ^^^^ notice the different id -->
<script src="script.js" type="text/javascript"></script>

var can1 = document.getElementById("play");
var can1Context = can1.getContext("2d");
//                ^^^^ use the variable here, not the id!
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

请参阅Why does jQuery or a DOM method such as getElementById not find the element?以获取解释。