使getContext（）公開的JavaScript？

我想獲取我的畫布的上下文，顯然我得到的錯誤Uncaught TypeError: Cannot call method 'getContext' of null使getContext（）公開的JavaScript？

顯然我得到它之前，它甚至initlilized？我應該如何去解決這個問題。如何讓我的畫布公開，以便在其他功能中可以訪問並擺脫錯誤？

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>

來源

2012-04-21 nn2

'window.onReady'不存在。可以使用'window.onload = fn'或'document.addEventListener（'DOMContentLoaded'，fn）'。 – 2012-04-21 05:53:44

哎呀，是的。我改變了這一點。我在亂搞。沒有。 – nn2 2012-04-21 05:55:22

你應該等到頁面加載初始化你的變量等待：

var canvas = null; 
var context = null; 

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

    loadGame(); 
};

來源

2012-04-21 05:56:27 Jasper

是的..這並沒有改變任何東西。 > _ <我不認爲。 – nn2 2012-04-21 06:05:54

如果你仍然得到同樣的錯誤，我相信問題在於你沒有向我們展示的東西 – Jasper 2012-04-21 06:12:46

這實際上就是所有的腳本。 – nn2 2012-04-21 06:14:56

使getContext（）公開的JavaScript？

回答

相關問題