JavaScript - 使畫布成爲全局變量

Question

現在，我正在搞亂HTML5並使用JavaScript來製作簡單的2D Tile地圖。這很好，但是我意識到我不能把一切都放在一個巨大的功能中。

我正在嘗試使canvas和context變爲全局變量，因爲在其他函數中可訪問。現在，它只能在「上載」時使用......我如何自己製作它？當我把canvas和context創建變量...我得到的錯誤Uncaught TypeError: Cannot call method 'getContext' of null

這裏是我的SSCCE：

// HTML5 JS Tile Example 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]]; 
    } 
} 

// On load... 
window.onload = function() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    var tiles = []; 
    var board = loadMap(1); 

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

    // 2. SET UP THE MAP 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; 
    // 3. DRAW 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); 
     } 
    } 
}; 

在線例如：http://mystikrpg.com/html5/

Answer 1

只需卸下var宣言和聲明變量外部：

// HTML5 JS Tile Example 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]]; 
    } 
} 

// On load... 

var canvas; 
var context; 

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

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

    // 2. SET UP THE MAP 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; 
    // 3. DRAW 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); 
     } 
    } 
}; 

這將創建變量在全球範圍內。