如何在HTML Canvas上重复绘制tileset图集中的特定瓦片

我帮你排查下代码里的几个关键问题，这都是新手用Canvas绘制瓦片地图时容易踩的坑：

核心问题分析 #

• 图片加载逻辑混乱：你每次调用sprite.draw都给图片绑定onload事件，循环625次就绑定了625个回调。图片加载完成后这些回调会批量执行，不仅效率低，还容易导致绘制顺序混乱。
• 绘制位置完全重叠：i * 0和j * 0会让所有瓦片都画在坐标(0,0)的位置，叠加在一起自然只能看到一个瓦片。
• 参数冗余且不匹配：StyleSheet已经保存了图片实例，但draw函数还要重复传background；另外你截取瓦片用的36,36和定义的瓦片尺寸16,16不匹配，容易导致截取到错误的区域。

修正后的代码 #

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

// 瓦片样式类：封装瓦片尺寸和绘制逻辑
var StyleSheet = function(image, tileWidth, tileHeight) {
  this.image = image;
  this.tileWidth = tileWidth;
  this.tileHeight = tileHeight;

  // 绘制单个瓦片：参数是图集里的瓦片坐标，以及画布上的目标坐标
  this.drawTile = function(tileX, tileY, destX, destY) {
    context.drawImage(
      this.image,
      tileX, tileY, this.tileWidth, this.tileHeight, // 从图集截取瓦片的区域
      destX, destY, this.tileWidth, this.tileHeight  // 画在画布上的位置和尺寸
    );
  }
}

// 图片加载器：确保图片加载完成后再执行回调
var Loader = function(src, callback) {
  var image = new Image();
  image.onload = function() {
    callback(image);
  }
  image.src = src;
}

// 加载图片，加载完成后再绘制地图
Loader("ground.png", function(background) {
  // 初始化瓦片样式：这里假设你的草地瓦片在图集里的坐标是(30,30)，尺寸16x16
  var sprite = new StyleSheet(background, 16, 16);
  
  // 5x5的网格（25个瓦片），循环绘制
  for (var i = 0; i < 5; i++) {
    for (var j = 0; j < 5; j++) {
      // 计算每个瓦片的目标坐标：i控制横向，j控制纵向
      var x = i * sprite.tileWidth;
      var y = j * sprite.tileHeight;
      // 绘制草地瓦片（图集里的坐标30,30）
      sprite.drawTile(30, 30, x, y);
    }
  }
});

关键修改说明 #

1. 重构图片加载逻辑：把onload放在Loader里，传入回调函数，确保图片完全加载后再开始绘制地图，避免因图片未加载完成导致的空白问题。
2. 修正绘制位置计算：用i * tileWidth和j * tileHeight计算每个瓦片的目标坐标，让瓦片横向、纵向依次排列，形成网格。
3. 简化绘制函数：StyleSheet的drawTile直接使用实例保存的图片，参数只传必要的瓦片坐标和目标坐标，减少冗余。
4. 统一瓦片尺寸：确保截取瓦片的尺寸和绘制到画布的尺寸一致，避免拉伸或截取错误区域。

如果你的草地瓦片在图集里的坐标不是(30,30)，或者瓦片尺寸不是16x16，只需要调整对应的参数即可。

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