如何在 Canvas 上为 drawImage() 的多个实例设置动画？答案

【问题标题】：How can I animate multiple instances of drawImage() on a Canvas?如何在 Canvas 上为 drawImage() 的多个实例设置动画？
【发布时间】：2019-01-06 19:45:40
【问题描述】：

我是第一次使用画布动画，但在尝试同时为多个图像制作动画时遇到了问题。

我可以在画布上绘制多个图像并随机放置它们。我可以让单个图像在画布上进行动画处理，但只能从数组中绘制最后一个图像。

我知道问题在于 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));
            }
        }
    }

我想将所有图像垂直向上设置动画，并在到达屏幕顶部后重置到底部，我有这个工作但仅适用于上面提到的最后一张图像

【问题讨论】：

仅在您的 animate() 函数中执行与动画相关的操作。加载图像是初始化，而不是动画。在初始化期间在单独的函数中加载一次图像。

标签： javascript animation canvas

【解决方案1】：

在animate() 函数中，更新y 的值后，您需要重新绘制每个图像。此外，您需要在每一帧（animate() 函数）中清除画布，而不是在绘制每个图像之后，因为clearRect 将删除以前在画布上绘制的所有内容。需要清除rect的原因是必须删除之前位置绘制的图像。

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();

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：