Question

我收到此错误：“无法读取属性'getContext'的null” 我用这个问题查看了其他人，所有人都在他们的HTML div创建之前运行了JS，但对我来说情况并非如此。我已将JSFiddle与我的代码相关联，但由于我有固定的元素，因此效果不佳。有人请帮忙，我不知道发生了什么事。 JSFIDDLE：https://jsfiddle.net/alec935/Ln7yghbx/1/

HTML：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <title>Snake</title>
    <link rel="stylesheet" href="snake.css">
    <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="game">
    <div id="play">
    <canvas id="playBoard"></canvas>
    <script src="snake.js"></script>
    </div>
    <div id="credits"><h1><i>Snake Game</i>, designed by Alec xxxxx</h1></div>
    <div id="info"></div>
</div>
</body>
</html>

CSS：

@keyframes pulsate {
  0% {color:white}
  50% {color:black;}
  100% {color:white}
}

body {
    background-image:url(images/snaxe.jpg);
    background: fill;
}

#game{
    width:1450px;
    height:800px;
    background-color:black;
    margin: 0 auto;
    position:relative;
}

#credits {
    color: white;
    font-size: 19px;
    text-shadow: rgb(255, 255, 255) 0px -1px 4px, rgb(255, 255, 0) 0px -2px 10px, rgb(255, 128, 0) 0px -10px 20px, rgb(255, 0, 0) 0px -18px 40px;
    animation: pulsate 4s infinite;
}

#play{
    width:720px;
    height:720px;
    background-color:red;
    z-index:1;
}

#playBoard {
    width:720px;
    height:720px;
    z-index:0;
}

#info{
    position:fixed;
    top:8px;
    right:115px;
    width:730px;
    height:800px;
    background-color:white;
    z-index: 1;
}

JavaScript的：

$(function() {
var snakeX, snakeY;
var fruitX, fruitY;
var gameOver = true;
var direction = 0; //0 = null, 1 = left, 2 = right, 3 = up, 4 = down

function Draw() {
    var canvas = document.getElementById("playBoard");
    var ctx = canvas.getContext("2d");

    //Snake
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="green";
    ctx.fillRect(385,385,50,50);

}


function Setup() {
    gameOver = false;
    Draw();
}

window.onload = Setup;
});

编辑：我的canvas元素中有一个拼写错误。这已经得到修复。然而，问题仍然存在。

Answer 1

仔细检查您的HTML。你的身份不合适。

<canvas>id="playBoard"</canvas>

应该是

<canvas id="playBoard"></canvas>

Answer 2

你在canvas元素上有一个拼写错误。改变这个：

<canvas>id="playBoard"</canvas>

到此：

<canvas id="playBoard"></canvas>

换句话说，将id放在元素本身上

Answer 3

您正在尝试选择ID为playBoard的元素，但您尚未将其分配到画布，可能只是一个错字。

<canvas>id="playBoard"</canvas>应为<canvas id="playBoard"></canvas>

画布没有用JS / HTML绘图

3 个答案: