只能获取两个 canvas 背景之一来制作动画

Question

所以我使用 canvas 和 JS 创建了一个“飘落的雪花”效果，它从屏幕上的少量开始，当用户点击时添加更多 - 它们是轻轻落下的动画一切正常，看起来很棒。

当我试图在下面添加第二个 canvas 时出现了问题，但没有交互性，但仍然有一些移动的雪花效果，只是为了让它看起来更好一点，并在整个页面上有一些连续性。我在更改数组、标识符和函数名称等时重新使用了第一个效果的代码

无论我尝试什么，我似乎都无法获得第二个动画效果。它在屏幕上获得了正确数量的“雪花”，但它们只是静态的。相同的动画代码适用于第一个，所以我不明白为什么它不适用于第二个。控制台中也没有错误，因为所有内容都是单独命名的，并且它可以读取两个数组。我在这两天的大部分时间里一直坚持这一点，所以任何帮助都会很棒！

顶级canvas动画完美的JS：

const canvas = document.getElementById("topCanvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const c = canvas.getContext("2d");


function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.strokeStyle = "#E2EAFC";
    c.fill();
    c.fillStyle = "#EDF2FB";
    c.stroke();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth ||
      this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}


const circleArray = [];

for (i = 0; i < 100; i++) {
  radius = (Math.random() * 1);
  x = Math.random() * (innerWidth - radius * 2) + radius;
  y = Math.random() * (innerHeight - radius * 2) + radius;
  dx = (Math.random() - 0.1) * 0.05;
  dy = (Math.random() - 0.2) * 0.1;
  circleArray.push(new Circle(x, y, dx, dy, radius));
}

console.log(circleArray);

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);

  for (i = 0; i < circleArray.length; i++) {
    circleArray[i].update();
  }
}

canvas.addEventListener('click', function() {
  for (i = 0; i < 80; i++) {
    radius = (Math.random() * 2);
    x = Math.random() * (innerWidth - radius * 2) + radius;
    y = Math.random() * (innerHeight - radius * 2) + radius;
    dx = (Math.random() - 0.2) * 0.05;
    dy = (Math.random() - 0.2) * 0.1;
    circleArray.push(new Circle(x, y, dx, dy, radius));
  }
});

animate();

第二个没有：

const background = document.getElementById("backgroundEffect");

background.width = window.innerWidth;
background.height = window.innerHeight;

const b = background.getContext("2d");


function Drawing(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {
    b.beginPath();
    b.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    b.strokeStyle = "#E2EAFC";
    b.fill();
    b.fillStyle = "#EDF2FB";
    b.stroke();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth ||
      this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}


const backgroundArray = [];

for (i = 0; i < 200; i++) {
  radius = (Math.random() * 2);
  x = Math.random() * (innerWidth - radius * 2) + radius;
  y = Math.random() * (innerHeight - radius * 2) + radius;
  dx = (Math.random() - 0.2) * 0.1;
  dy = (Math.random() - 0.2) * 0.4;
  backgroundArray.push(new Drawing(x, y, dx, dy, radius));
}

console.log(backgroundArray);

function animateBackground() {
  requestAnimationFrame(animate);
  b.clearRect(0, 0, innerWidth, innerHeight);

  for (i = 0; i < backgroundArray.length; i++) {
    backgroundArray[i].update();
  }
}

background.addEventListener('click', function() {
  for (i = 0; i < 80; i++) {
    radius = (Math.random() * 2);
    x = Math.random() * (innerWidth - radius * 2) + radius;
    y = Math.random() * (innerHeight - radius * 2) + radius;
    dx = (Math.random() - 0.2) * 0.1;
    dy = (Math.random() - 0.2) * 0.4;
    backgroundArray.push(new Circle(x, y, dx, dy, radius));
  }
});

animateBackground();

它们位于不同的 JS 文件中，除了动画本身之外，它们都可以正常读取和执行。为了尝试说明，我附上了两张图片——点击前和点击后。顶部 canvas 粒子四处移动，但底部粒子不移动

Answer 1

您确定控制台没有错误吗？

如果我运行他们在第二个孤立我得到：
message": "Uncaught ReferenceError: animate is not defined",

第二个动画的代码应该是：

function animateBackground() {
  requestAnimationFrame(animateBackground);
  ...

但是你有：

function animateBackground() {
  requestAnimationFrame(animate);
  ...

所以你的错误是两个动画都调用了同一个 requestAnimationFrame 函数，而不是每个都调用自己的函数，我没有看到任何其他问题...

只能获取两个 canvas 背景之一来制作动画

Can only get one of two canvas backgrounds to animate

javascript

animation

canvas