错误：未捕获的类型错误：无法读取 null 的属性“getContext”

Question

当我写：

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //var canvas = document.getElementById("canvas") //var ctx = canvas.getContext("2d") //var c = document.getElementById("canvas") //var ctx = c.getCont#indevtext { //ext("") $("#start").click(function(){ start() }) function start() { $(document).ready(function(){ $("#start").click(function(){ $("canvas").show() $("#start").hide() }) }) } sg() start() function sg() { //ctx.clearRect(0, 0, canvas.width, canvas.height) //ctx.BeginPath() //ctx.arc(x, y, radius, 0, Math.PI*2); //ctx.fillStyle = "brown"; //ctx.fill() } function frame() { //ctx.clearRect(0, 0, canvas.width, canvas.height) } window.onload = function() { //canvas = document.getElementById("canvas") canvas.getContext("2d") }

 #indevtext { color: darkgreen; text-align: center; padding: 250px 0; }.container { height: 200px; text-align: center; margin: 250px 0; position: relative; border: 3px solid green; }.sd { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #start { text-align: center; margin: 250px 0; color: limegreen; } #game { border: black 1px solid; background-color: #178735; display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <head> <body> <div> <div> <div> <canvas id="game" width="550px" height="587px"></canvas> <h1 id="start">Enter Game</h1> </div> </div> </div> </body> </head>

我收到一个错误：

错误：未捕获的类型错误：无法读取 null 的属性“getContext”

我检查了我的代码 5 次，试图找到要做什么，并检查帖子。 请帮我。 我想和我的朋友一起玩游戏（：

你可以帮我找到如何制作 map。 如果您想为游戏提供帮助，请告诉我（：

Answer 1

您指的是错误的id ：

<canvas id="game" width="550px" height="587px"></canvas>
...         ^^^^
var canvas = document.getElementById('canvas');
                                     ^^^^^^^^

它应该是：

var canvas = document.getElementById('game');