Как нарисовать определенный набор плиток из листа набора плиток на HTML-холсте несколько раз вместо всего изображения - PullRequest
Новая
       36

Как нарисовать определенный набор плиток из листа набора плиток на HTML-холсте несколько раз вместо всего изображения

0 голосов
/ 10 мая 2018

Итак, у меня есть набор плиток, полный маленьких плиток, таких как земля, вода, деревья и т. Д. У меня есть цикл 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 в цикле, но это не помогает

Теперь это так: enter image description here

но мне нужно, чтобы это было так:

enter image description here

1 Ответ

0 голосов
/ 10 мая 2018 
sprite.draw(background, 30, 30, 36, 36, i * 36, j * 36, 36, 36);
  • sprite.width / height здесь не может играть роль, так как лист плиток содержит (может содержать) большой выбор плиток, и вы хотите получить (и положить) только небольшую его часть
  • умножение на 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 изображением. Это было, но оно было пустым, его содержимое и ширина / высота не были доступны в то время.

...