JavaScript-使画布成为全局变量

现在，我正在搞乱HTML5，并使用JavaScript制作一个简单的2D平铺图。它进展顺利，但我意识到我不能把所有的东西都放在一个巨大的函数中

我试图使

canvas

和

context

变量成为可由其他函数访问的全局变量。现在，它只在“加载”状态下可用。。。我如何用它自己制作？当我放置

画布

和

上下文

创建变量时。。。我得到错误

uncaughttypeerror:无法调用null的方法“getContext”

这是我的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);
        }
    }
};

//HTML5 JS互动程序示例
//设置返回地图的二维数组
函数加载图（map）{
if（map==1）{
返回[
[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]];
}
}
//正在加载。。。
window.onload=函数（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
var-tiles=[]；
var板=负荷图（1）；
canvas.width=512；
canvas.height=352；
//2.设置地图分幅
对于（x=0；x只需删除
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);
        }
    }
};

//HTML5 JS互动程序示例
//设置返回地图的二维数组
函数加载图（map）{
if（map==1）{
返回[
[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]];
}
}
//正在加载。。。
var帆布；
var语境；
window.onload=函数（）{
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
var imageObj=新图像（）；
var-tiles=[]；
var板=负荷图（1）；
canvas.width=512；
canvas.height=352；
//2.设置地图分幅
因为（x=0；x）你知道吗？我一定是睡不着了，因为我知道这一点，但我只是需要提醒一下……谢谢你。