Question

我正在尝试获取画布的上下文，显然我收到了错误Uncaught TypeError: Cannot call method 'getContext' of null

显然我在它被提升之前就已经得到了它？我该怎么做呢如何使我的画布公开，以便在其他函数中可以访问并消除错误？

    var spawnX = 5;
    var spawnY = 7;
    var realSpawnX = spawnX*32;
    var realSpawnY = spawnY*32;
    var playerImg = new Image();
    var playerImgX = new Image();
    var currX = 5;
    var currY = 7;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

window.onLoad = function() {

  loadGame();

};

// The map
function loadMap(map) {
  if (map == 1) {
    return [
[ 11, 1, 1, 1, 1, 1, 1, 190, 115, 1, 1, 1, 1, 1, 1, 2],
[ 190, 190, 190, 190, 190, 190, 190, 190, 13, 148, 148, 148, 148, 148, 121, 2],
[ 1, 520, 127, 127, 127, 127, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 148, 148, 183, 148, 343, 1],
[ 1, 520, 364, 174, 127, 361, 127, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[ 115, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 115],
[ 1, 514, 13, 13, 394, 343, 145, 220, 145, 145, 145, 13, 13, 13, 13, 1],
[ 1, 514, 13, 13, 343, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 514, 514, 13, 118, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 1, 1, 115, 1, 1, 145, 145, 145, 145, 145, 1, 1, 1, 1, 1]
];
    }
}

function loadGame(){
    // Load Game
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    var tiles = [];
    var board = loadMap(1);

    canvas.width = 512;
    canvas.height = 352;

    // Set up the tiles
for (x = 0; x <= 520; x++) {
    imageObj = new Image(); // new instance for each image
    imageObj.src = "line_tile/t"+x+".png";
    tiles.push(imageObj);
} 
var theX;
var theY;
// Draw the map by rows and cols
for (x = 0; x <= 10; x++) {
for (y = 0; y <= 15; y++) {

theX = x*32;
theY = y*32;
    //context.drawImage(tiles[board[x][y]], theY, theX,32,32);
    //console.log("Tile X: " + x + " | Tile Y: " + y + " - X Pos: " + theX + " | Y Pos: " + theY);
    }
    } 

    // DRAW THE PLAYER            
    spawnX = 5;
    spawnY = 7;
    realSpawnX = spawnX*32;
    realSpawnY = spawnY*32;
    currX = 5;
    currY = 7;
    playerImg.src = "me.gif";
    context.drawImage(playerImg, realSpawnY, realSpawnX,32,32);
    console.log("Player drawn at ("+spawnX+","+spawnY+") Real spawn: X: " +realSpawnX + " Y: " + realSpawnY);

}

// Pressing arrow keys 'moves' the player
$(document).keydown(function(e){
    if (e.keyCode == 37) { // LEFT ARROW
        currX = currX-1;
        console.log("New X:" + currX);
       return false;
    }
    if (e.keyCode == 39) { // RIGHT ARROW
        currX = currX+1;
        console.log("New X:" + currX);
       return false;
    }

    spawnX = 1;
    spawnY = 1;
    realSpawnX = spawnX*32;
    realSpawnY = spawnY*32;
    playerImgX.src = "me.gif";
    context.drawImage(playerImgX, realSpawnY, realSpawnX,32,32);
});

这是HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


    <title>Untitled 1</title>

    <script type="text/javascript" src="theGame.js"></script>
    <style type="text/css">
<!--
    #canvas {
       background:red;       
    }
-->
</style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
</html>

Answer 1

您应该等待初始化变量，直到页面加载完毕：

var canvas = null;
var context = null;

window.onload = function() {
    canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    loadGame();
};

JavaScript使getContext（）公开？

1 个答案: