HTML Canvas与JS绘制2D等距瓦片异常：高度不一致且无法形成正方形

我来帮你搞定这个瓦片绘制的问题！你的代码目前有两个核心问题：循环逻辑错误导致坐标计算混乱，以及坐标公式不对让瓦片位置偏移、无法形成完整的正方形布局。下面一步步给你修复：

问题分析 #

• 循环方向错误：你的内层循环j从map[i].length（也就是6）倒序到0，这不仅会访问到数组之外的索引（map的列索引是0-5），还会让瓦片的绘制顺序和坐标计算完全混乱，导致上下错落。
• 坐标公式错误：原有的x和y计算偏向等轴测布局，但你想要的是正方形网格，而且这个公式会让部分瓦片超出画布范围，看起来高度不一致。

修复后的正方形网格代码 #

var map = [ 
  [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], 
];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', '768px');
canvas.setAttribute('height', '768px');
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'https://opengameart.org/sites/default/files/basic_ground_tiles.png';
document.getElementById("content").appendChild(canvas);
var tile_width = 128;
var tile_height = 128;

img.onload = function() {
  // 正序遍历行和列，确保只访问有效索引
  for (let i = 0; i < map.length; i++){
    for (let j = 0; j < map[i].length; j++){
      // 正方形网格坐标：横向由j控制，纵向由i控制
      var x = j * tile_width;
      var y = i * tile_height;
      // 绘制对应瓦片（后续可根据map值切换不同瓦片）
      ctx.drawImage(img, 0, 0, 128, 128, x, y, tile_width, tile_height);
    }
  }
}

关键修改点 #

• 修正循环逻辑：把内层循环改成正序遍历j从0到map[i].length-1，避免访问无效索引，同时让瓦片按从左到右、从上到下的顺序绘制。
• 改用正方形网格坐标：x = j * tile_width和y = i * tile_height的组合，刚好让6×128的瓦片填满768×768的画布，形成整齐的正方形布局。
• 使用let声明循环变量：避免全局变量污染，防止后续代码出现意外冲突。

如果你需要等轴测（菱形）布局 #

如果你的初衷是绘制菱形排列的瓦片，只需要调整坐标公式并添加居中偏移，就能让所有瓦片处于同一视觉层级：

img.onload = function() {
  // 计算偏移量，让菱形布局居中在画布内
  const offsetX = (canvas.width - map[0].length * tile_width / 2 - map.length * tile_width / 2) / 2 + tile_width / 2;
  const offsetY = (canvas.height - map.length * tile_height / 2 - map[0].length * tile_height / 2) / 2;
  
  for (let i = 0; i < map.length; i++){
    for (let j = 0; j < map[i].length; j++){
      // 等轴测瓦片坐标公式
      const x = (i - j) * tile_width / 2 + offsetX;
      const y = (i + j) * tile_height / 2 + offsetY;
      ctx.drawImage(img, 0, 0, 128, 128, x, y, tile_width, tile_height);
    }
  }
}

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