javascript - 来自外部文件的画布脚本

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);

请参阅为什么 jQuery 或诸如getElementById找不到元素之类的 DOM 方法？解释一下。