javascript - 使用外部 JS 文件中的文档不起作用
问题描述
我正在尝试用 JS 编写游戏。我创建了一个带有画布的 html 文件，一个 main.js 文件，我将在其中编写代码。现在我想获得画布的上下文，这样我就可以在上面画画了。
问题是，当我在 main.js 中创建一个变量“canvas”并为其赋值：document.getElementById('gameScreen')，并在控制台中打印它以查看它是否有效时，我就是不明白任何事物。没有错误，没有消息，控制台保持为空。此外，当我尝试获取画布的上下文时，我的编辑器（Visual Studio 代码，便携版）无法识别 getContext 方法。
首先我认为我的代码是错误的，所以我尝试将其写入标签。并且代码有效。所以我的 javascript 代码只在 html 文件中有效。我有这个问题很长时间了，但我只有很短的脚本，所以将它包含在标签中没有任何问题。但是现在，在单个文件中编写游戏是不可能的，因为它很快就会变得非常混乱。我尝试在其他浏览器（Firefox、Chrome、Chromium、Internet Explorer）中运行 html 文件，但我总是得到相同的结果。
这是html文件：
<html>
<head>
<meta charset="utf-8">
<title>Game - Platformer</title>
<script src="/js_source/main.js"></script>
<link rel="stylesheet" type="text/css" href="/css/platformer.css">
</head>
<body>
<canvas id="gameScreen"></canvas>
</body>
</html>
这里是 JS 文件：
canvas = document.getElementById("gameScreen");
ctx = canvas.getContext("2d");
console.log(ctx);
我认为这是一个链接问题，是否有特定的内容要在 JS 文件中写入以访问文档？显然代码没有被执行；我想如果变量 ctx 不包含控制台应该告诉它的任何内容，对吗？