畫布無法以JS / HTML繪制

Question

我收到此錯誤：“無法讀取null的'getContext'屬性”我用這個問題查找了其他人，他們所有人在創建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;
});

編輯：我的畫布元素中有一個錯字。 此后已解決。 但是，問題仍然存在。

Answer 1

仔細檢查您的HTML。 您的ID放錯了位置。

<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 個解決方案

解決方案1
1 已采納 2017-03-22 20:57:22

解決方案2
0 2017-03-22 20:59:16

解決方案3
0 2017-03-22 21:01:08

畫布無法以JS / HTML繪制

問題描述

3 個解決方案

解決方案1 1 已采納 2017-03-22 20:57:22

解決方案2 0 2017-03-22 20:59:16

解決方案3 0 2017-03-22 21:01:08

解決方案1
1 已采納 2017-03-22 20:57:22

解決方案2
0 2017-03-22 20:59:16

解決方案3
0 2017-03-22 21:01:08