在Javascript中显示图块地图

Question

这是我现在正在使用的代码，试图生成一个tilemap：

// --- Javascript ---

window.onload = function (){

  var can = document.getElementById("canvas");

  var ctx = can.getContext('2d');

  var map = {

  cols: 8, //# of cols

  rows: 8, // # of rows

  tSize: 32, // tile size (32px x 32px)

  tiles: [

    [1, 1, 1, 1 ,1 ,1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1],

    [1, 1, 1, 1, 1, 1, 1, 1]

  ], // map

};

var tileAtlas = new Image();

tileAtlas.src = 'Tiles.png';

tileAtlas.onload = function () {

  for (var c = 0; c < map.cols; c++) {

    for (var r = 0; r < map.rows; r++) {

      if (map.tiles[c][r] !== 0) { // 0 is an empty tile

        ctx.drawImage(

          tileAtlas, // image

          map.tiles[c][r] * 32, // cut start x

          0, // cut start y

          map.tsize, // size of tiles for cut size x

          map.tsize, // size of tiles for cut size y

          c * map.tsize, // place tiles on canvas x

          r * map.tsize, // place tiles on canvas y

          map.tsize, // place height

          map.tsize // place width

        );

      }

    }

  }

}

}

这是spritesheet

本来应该显示一个8x8的“草”网格，但它是空白的，但控制台却很清晰