Как я могу анимировать несколько экземпляров drawImage () на холсте?

Question

Я впервые работаю с анимацией холста, и у меня возникла проблема при попытке анимировать несколько изображений одновременно.

Я могу нарисовать несколько изображений на холсте и расположить их случайным образом. Я могу получить одно изображение для анимации на холсте, но только последнее изображение, нарисованное из массива.

Я знаю, что проблема в том, что clearRect () очищает все ранее нарисованные изображения из указанного массива, но не могу понять, как очиститьRect только после того, как все изображения были нарисованы в каждом кадре анимации, мне было интересно, сталкивался ли кто-нибудь с что-то вроде этого раньше, и если бы они могли указать мне правильное направление, как только clearRect () после того, как все изображения нарисованы?

function animate() {
        srequestAnimationFrame(animate);

        for(let i = 0; i < images.length; i++) {
            let y = images[i].y;
            let img = new Image();
            img.src = images[i].url;

            img.onload = function() {
                // This is clearing all images drawn before the last image
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, images[i].x, y, images[i].width, images[i].height);
            }

            images[i].y -= 1;

            if(images[i].y < (0 - images[i].height)) {
                images[i].y = window.innerHeight;
                images[i].x = (Math.random() * (canvas.width - 160));
            }
        }
    }

Я хотел бы анимировать все изображения по вертикали вверх страницы, чтобы они сбрасывались в нижнюю часть после достижения верхней части экрана, у меня это работает, но только для последнего изображения, как упомянуто выше

Answer 1

В функции animate() после обновления значения для y вам необходимо заново нарисовать каждое изображение. Кроме того, вам нужно очищать холст с каждым кадром (функция animate()), а не после рисования каждого изображения, так как clearRect удалит все ранее нарисованное на холсте. Причина, по которой вам нужно очистить прямоугольник, заключается в том, что вы должны удалить изображения, нарисованные в предыдущей позиции.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = window.innerWidth);
cx = cw / 2;
let ch = (canvas.height = window.innerHeight),
    cy = ch / 2;

let images = [
  {
    url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppy150x150.jpg",
    x: Math.random() * cw,
    y: Math.random() * ch,
    width: 50,
    height: 50
  },
  {
    url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppy200x200.jpg",
    x: Math.random() * cw,
    y: Math.random() * ch,
    width: 40,
    height: 40
  },
  {
    url:
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg",
    x: Math.random() * cw,
    y: Math.random() * ch,
    width: 60,
    height: 60
  }
];

for (let i = 0; i < images.length; i++) {
  let y = images[i].y;
  images[i].img = new Image();
  images[i].img.src = images[i].url;

  images[i].img.onload = function() {
    // This is clearing all images drawn before the last image
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(this, images[i].x, y, images[i].width, images[i].height);
  };
}

function animate() {
  requestAnimationFrame(animate);
  // clear the canvas here!
  ctx.clearRect(0, 0, cw, ch);
  for (let i = 0; i < images.length; i++) {
  //update the y value
    images[i].y -= 1;
    if (images[i].y < -images[i].height) {
      images[i].y = window.innerHeight;
      images[i].x = Math.random() * (canvas.width - 160);
    }
    //draw again the image
    ctx.drawImage(
      images[i].img,
      images[i].x,
      images[i].y,
      images[i].width,
      images[i].height
    );
  }
}
animate();

<canvas id="canvas"></canvas>