使用HTML5 Canvas绘制瓦片网格时画布空白的问题

你的代码存在几个关键错误导致画布空白，逐一修正即可：

1. 变量名不匹配

   • map对象中定义的列数属性是cols，但绘制循环里错误使用了map.columns，导致外层循环直接不执行
   • map对象中瓦片尺寸属性是tsize，但代码中多处写成了map.tileSize，导致坐标计算和矩形绘制时尺寸为undefined，无法生成有效图形

2. 错误的调试函数
   drawTile函数里用了print()，浏览器环境没有这个全局函数，会抛出错误中断代码执行，应该替换为console.log()

3. 方法内的外部依赖
   getTile方法里使用map.cols，改为this.cols更合理，避免依赖外部变量，提升代码健壮性

修正后的完整代码：

JavaScript代码 #

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var map = {
  cols: 8,
  rows: 8,
  tsize: 64,
  tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1
  ],
  getTile: function(col, row) {
    return this.tiles[row * this.cols + col];
  }
};

console.log("drawing tilemap");

draw_map();

function draw_map() {
  console.log("hey its working!");

  for (let column = 0; column < map.cols; column++) {
    for (let row = 0; row < map.rows; row++) {
      console.log("its tiling time");
      const tile = map.getTile(column, row);
      const x = column * map.tsize;
      const y = row * map.tsize;
      drawTile(tile, x, y);
    }
  }
}

function drawTile(tile, X, Y) {
  console.log("picking color");
  if (tile === 1) {
    ctx.fillStyle = "#00ff44";
  }
  if (tile === 2) {
    ctx.fillStyle = "#fffd94";
  }
  if (tile === 3) {
    ctx.fillStyle = "#78877d";
  }
  ctx.fillRect(X, Y, map.tsize, map.tsize);
}

HTML代码 #

<canvas id="myCanvas" width="512" height="512" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

内容的提问来源于stack exchange，提问作者Jon Ali