如何在html画布上多次从tileset工作表中绘制特定的tileset而不是整个图像

Question

所以我有一个瓷砖组，里面装满了地面，水，树等小瓷砖。我有一个for循环，循环一定时间在画布上绘制瓷砖。它只绘制一次像我需要的小特定图块，或绘制整个图像或小的特定图块，但在全屏幕上。但我需要在画布上重复25次草砖以制作地图。代码：

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

var StyleSheet = function(image, width, height) {
  this.image = image;
  this.width = width;
  this.height = height;


  this.draw = function(image, sx, sy, swidth, sheight, x, y, width, height) {
    image.onload = function() {
      context.drawImage(image, sx, sy, swidth, sheight,x, y, width, height);
    }
  }
}

var Loader = function(src) {
  this.image = new Image();
  this.image.src = src;
  return this.image;
}

var background = new Loader("ground.png");
console.log(background);
var sprite = new StyleSheet(background, 16, 16);
for (i = 0; i < 25; i++) {
  for (j = 0; j < 25; j++) {
    sprite.draw(background, 30, 30, 36, 36, i * 0, j * 0, sprite.width, sprite.height);
  }
}

我在循环中尝试* 0, j * 0但没有帮助

现在它是这样的：

但我需要它像这样：

Answer 1

sprite.draw(background, 30, 30, 36, 36, i * 36, j * 36, 36, 36);

• sprite.width / height无法在此处发挥作用，因为图块包含（可能包含）大量瓷砖，您只想获得（并放置）其中的一小部分
• 乘以0 doe没有多大意义，我想你已经感觉到了。

（和drawImage如果您需要再次查看它：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage）

<小时/> 哦，是的。 Loader无法以这种方式工作，浏览器异步加载图像，并且该方法返回时图像将不可用。

以下是您可以运行的快速测试：

var Loader = function(src) {
  this.image = new Image();
  this.image.src = src;

  this.image.onload=function(){
    var sprite = new StyleSheet(background, 16, 16);
    for (i = 0; i < 25; i++) {
      for (j = 0; j < 25; j++) {
        sprite.draw(background, 30, 30, 36, 36, i * 0, j * 0, sprite.width, sprite.height);
      }
    }
  }

  return this.image;
}

var background = new Loader("ground.png");
console.log(background);
//var sprite = new StyleSheet(background, 16, 16);
//for (i = 0; i < 25; i++) {
//  for (j = 0; j < 25; j++) {
//    sprite.draw(background, 30, 30, 36, 36, i * 0, j * 0, sprite.width, sprite.height);
//  }
//}

图形内容已被移动到图像加载的事件处理程序中。

旁注：我看到console.log(background);行，您可能正在尝试检查background是否为图片。它是，但它是一个空的，它的内容和宽度/高度当时不可用。