Question

HTML5（包含 Javascript）游戏，画布设置错误 [重复]

2019-06-17

60

javascript html

我已经在 HTML5 中正确设置了一个画布（我认为），但我遇到了一个错误：

我之前制作过一个画布游戏，我多次复制并粘贴了代码，它对我来说看起来是正确的，我在 Google 上搜索了 HTML 画布设置，我得到了相同的答案，请帮忙！

<html>
<head>
</head>
<body>
    <script src="jumpMan.js"></script>
    <canvas width="1000px" height="450px" id="canvas"></canvas>

</body>
</html>

//jumpMan.js
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(50,50,50,50);

我的错误：

Uncaught TypeError: Cannot read property 'getContext' of null at jumpMan.js:3 (anonymous) @ jumpMan.js:3

Answer 1

您的问题是您的内容尚未呈现。

因此，您必须在访问 DOM 之前检查您的内容/文档是否已呈现。

试试这个：

document.addEventListener('DOMContentLoaded', fn, false) ;
function fn() { //get canvas access...}

Answer 2

我最近发现了其他同样有效的方法：如果您将标签移到标签下，它就会起作用。

<canvas width="1000px" height="450px" id="canvas" ></canvas>
<script src='jumpMan.js'></script>