javascript - javascript将画布效果插入数组？

Question

有人能指出我正确的方向吗我试图将此脚本插入到数组中，以便我可以动态地将这些效果添加到 div 中。这是我正在测试的代码

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.background = "url('https://phonewallpaper.net/wp-content/uploads/2018/11/Vegeta-Dragon-Ball-Z-Wallpaper.jpg')";
canvas.style.backgroundSize="cover";
canvas.style.backgroundPosition="center";
canvas.style.backgroundRepeat="no-repeat";

const particlesArray = [];
const totalParticles = (canvas.height * canvas.width) / 4000;





class Particle {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.maxSize = 1.7;
    this.size = Math.random() * this.maxSize + 1;
    this.speedX = Math.random() * 0.2 - 0.1;
    this.speedY = Math.random() * 0.2 - 0.1;
    this.color = "#fff";
    this.reached = false;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fill();
  }

  update() {
    // randomly moving
    if (this.x + this.size >= canvas.width || this.x - this.size <= 0) {
      this.speedX *= -1;
    }
    if (this.y + this.size >= canvas.height || this.y - this.size <= 0) {
      this.speedY *= -1;
    }

    if (this.size < this.maxSize && !this.reached) {
      this.size += 0.005;
    } else {
      this.reached = true;
      this.size -= 0.005;
    }

    if (this.size < 0) {
      this.reached = false;
      this.size += 0.005;
    }

    this.x += this.speedX;
    this.y += this.speedY;
  }
}

function drawLine(particle1, particle2) {
  ctx.beginPath();
  ctx.moveTo(particle1.x, particle1.y);
  ctx.lineTo(particle2.x, particle2.y);
  ctx.lineWidth = particle1.size * 0.2;
  ctx.strokeStyle = "#ddd";
  ctx.stroke();
  ctx.closePath();
}

function generateParticles() {
  for (let i = 0; i < totalParticles; i++) {
    particlesArray.push(new Particle());
  }
}

function calculateDistance(particle1, particle2) {
  let distance = Math.hypot(
    particle1.x - particle2.x,
    particle1.y - particle2.y
  );
  return distance;
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particlesArray.forEach((particle, i) => {
    particle.draw();
    particle.update();

    for (let j = i; j < particlesArray.length; j++) {
      const distance = calculateDistance(particle, particlesArray[j]);

      if (distance < 50) {
        drawLine(particle, particlesArray[j]);
      }
    }
  });

  requestAnimationFrame(animate);
}

function newNetworkStars(){
 generateParticles();
animate();}

newNetworkStars();

<canvas style="width:100px; height:200px;background-position: center;background-repeat: no-repeat;"></canvas>

我一直在尝试一些东西，但我真的迷路了，我不知道如何将它插入数组中。我正在考虑将整个事情推入阵列，但这不起作用。我确实让它工作了，但不是我想要的方式。我所做的是将它作为一个函数来推动。这让我可以尽可能多地推送，但效果只运行一次，它不会不断更新，所以想要的效果不会/我正在寻找的效果。

像这样：

arrayCanvas.push(new effectFunction(canvasId));

标签： javascripthtmlhtml5-canvas