Как заполнить объект произвольным изображением в Javascript с помощью Canvas на движущемся объекте?

Question

var blobs = [];
var zoom = 1;

function setup() {
  createCanvas(600, 600);
  blob = new Blob(0, 0, 64);
  for (var i = 0; i < 200; i++) {
    var x = random(-width, width);
    var y = random(-height, height);
    blobs[i] = new Blob(x, y, 2);
  }
}

function draw() {
  background(0);

  translate(width / 2, height / 2);
  var newzoom = 64 / blob.r;
  zoom = lerp(zoom, newzoom, 0.1);
  scale(zoom);
  translate(-blob.pos.x, -blob.pos.y);

  for (var i = blobs.length - 1; i >= 0; i--) {
    blobs[i].show();
    if (blob.eats(blobs[i])) {
      blobs.splice(i, 1);
    }
  }

  blob.show();
  blob.update();

Я хочу, чтобы эта «капля» была заполнена изображением ячейки ... Как мне это сделать? Моя «капля» в настоящее время solid белого цвета ... Любая помощь приветствуется, поскольку я даже не знаю, с чего начать. Хотя на самом деле «капля» перемещается с помощью мыши, как в популярной игре Agar.io.

var blob;

var blobs = [];
var zoom = 1;

function setup() {
  createCanvas(600, 600);
  blob = new Blob(0, 0, 64);
  for (var i = 0; i < 200; i++) {
    var x = random(-width, width);
    var y = random(-height, height);
    blobs[i] = new Blob(x, y, 2);
  }
}

function draw() {
  background(0);

  translate(width / 2, height / 2);
  var newzoom = 64 / blob.r;
  zoom = lerp(zoom, newzoom, 0.1);
  scale(zoom);
  translate(-blob.pos.x, -blob.pos.y);

  for (var i = blobs.length - 1; i >= 0; i--) {
    blobs[i].show();
    if (blob.eats(blobs[i])) {
      blobs.splice(i, 1);
    }
  }

  blob.show();
  blob.update();
}

Answer 1

Контекст холста Метод drawImage позволит вам визуализировать изображение на холсте почти так же, как вы рисуете круг. Вы можете указать координаты x, y, ширину и высоту. Предполагая, что вы в настоящее время визуализируете большой двоичный объект, выполняя что-то вроде:

ctx.beginPath();
ctx.arc(blob.pos.x, blob.pos.y, blob.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath;

Затем вы можете заменить свой код на:

var img = document.getElementById("cellImage"); //or however you want to get an img element
ctx.drawImage(img, blob.pos.x - blob.radius/2, blob.pos.y - blob.radius/2, blob.radius, blob.radius);//make sure your image is square, otherwise it will squish it weirdly

Причина, по которой мы вычитаем radius/2 из координат, заключается в том, что входные координаты - это верхний левый угол, а не центр.
В качестве альтернативы вы сказали, что капля движется аналогично agar.io. Это предполагает, что он всегда находится в центре холста, и все движется относительно него. В этом случае код еще проще, так как вам просто нужно визуализировать изображение в центре:

var img = document.getElementById("cellImage"); //or however you want to get an img element
ctx.drawImage(img, canvas.width/2 - blob.radius/2, canvas.height/2 - blob.radius/2, blob.radius, blob.radius); //we just use the centre coordinates of the canvas instead of the blob coordinates.

Надеюсь, это поможет!