javascript - 如何从 html Canvas 上的tileset工作表多次绘制特定的tileset而不是整个图像

Question

所以我有一个充满小瓷砖的瓷砖集，如地面、水、树木等。我有一个 for 循环，它循环一定次数以在 Canvas 上绘制瓷砖。它要么只绘制一次像我需要的小的特定图 block ，要么绘制整个图像或小的特定图 block ，但在全屏上。但我需要在 Canvas 上重复 25 次草 block 才能生成 map 。代码:

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 在这里不起作用，因为图 block 表包含(可能包含)大量图 block 选择，并且您想要获取(和放置)只是其中的一小部分
• 与 0 相乘没有多大意义，我想你已经感觉到了。

(如果您需要再次查看，还有 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 是否是图像。是的，但它是一个空的，它的内容和宽度/高度当时不可用。