Javascript 来自外部文件的画布脚本

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

//script.js：
var can1=document.getElementById（“play”）；
var can1Context=play.getContext（“2d”）；
can1Context.fillStyle=“#FF0000”；
can1Context.fillRect（0,015,75）；

但是这不起作用，但是如果脚本与Canvas元素位于同一个文件中，它就起作用了。谁能给我解释一下吗？

换成

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

---

请参阅以获取解释。

他的元素id和他尝试选择的元素id甚至不匹配，我们遇到了比这里更大的问题，我担心…@GNi33:我注意到并已修复它：-）无论如何，谢谢您的提醒！哦，对不起。我更改了这个示例的ID。我的意思是var can1=document.getElementById（“can1”）@user2237411：当然，您可以使用变量名和元素id的任意组合，只有您应该区分它们：-）感谢帮助您的链接：）