擦除粒子文本时如何加载下一个字符串？

如何解决擦除粒子文本时如何加载下一个字符串？

我是 vanilla js 和 webgl 内容的新手。我创建了一个在鼠标悬停时会扭曲的粒子文本。并且它们的粒子之间用一条线相连。代码如下。

const canvas = document.getElementById("canvas1");
const dpr = window.devicePixelRatio;
//console.log(dpr);
const ctx = canvas.getContext("2d");
ctx.scale(dpr,dpr);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particleArray = [];
let adjustX = 10;
let adjustY = 0;
//handle mouse
const mouse = {
  x: null,y: null,radius: 30,};
window.addEventListener("mousemove",function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
  //console.log(mouse.x,mouse.y);
});


ctx.fillStyle = "white";
ctx.font = "35px verdana";
ctx.fillText("aman ",30);

const textCoordinates = ctx.getimageData(0,100,100);

class Particle {
  constructor(x,y) {
    this.x = x + Math.random() * 6 - 3;
    this.y = y + Math.random() * 6 - 3;
    this.size = 1;
    this.baseX = this.x;
    this.baseY = this.y;
    this.density = Math.random() * 10 + 50;
  }
  draw() {
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.size,Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
  //distance between mouse and particle
  update() {
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    let forceDirectionX = dx / distance;
    let forceDirectionY = dy / distance;
    let maxdistance = mouse.radius;
    let force = (maxdistance - distance) / maxdistance;
    let directionX = forceDirectionX * force * this.density;
    let directionY = forceDirectionY * force * this.density;

    if (distance < mouse.radius) {
      this.x -= directionX;
      this.y -= directionY;
    } else {
      if (this.x !== this.baseX) {
        let dx = this.x - this.baseX;
        this.x += dx / 10;
      }
      if (this.y !== this.baseY) {
        let dy = this.y - this.baseY;
        this.y += dy / 10;
      }
    }
  }
}

//console.log(textCoordinates);
function init() {
  particleArray = [];
  for (let y = 0,y2 = textCoordinates.height; y < y2; y++) {
    for (let x = 0,x2 = textCoordinates.width; x < x2; x++) {
      if (
        textCoordinates.data[y * 4 * textCoordinates.width + x * 4 + 3] > 128
      ) {
        let positionX = x + adjustX;
        let positionY = y + adjustY;
        particleArray.push(new Particle(positionX * 4,positionY * 4));
      }
    }
  }
}
init();
//console.log(particleArray);

function animate() {
  ctx.clearRect(0,canvas.width,canvas.height);
  for (let i = 0; i < particleArray.length; i++) {
    particleArray[i].draw();
    particleArray[i].update();
  }
  connect();
  requestAnimationFrame(animate);
}
animate();
function connect() {
  let opacityValue = 1;
  for (let a = 0; a < particleArray.length; a++) {
    for (let b = a; b < particleArray.length; b++) {
      let dx = particleArray[a].x - particleArray[b].x;
      let dy = particleArray[a].y - particleArray[b].y;
      let distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < 14) {
        opacityValue = 0.5;
        ctx.strokeStyle = "rgb(200,150,160," + opacityValue + ")";
        ctx.linewidth = 1;
        ctx.beginPath();
        ctx.moveto(particleArray[a].x,particleArray[a].y);
        ctx.lineto(particleArray[b].x,particleArray[b].y);
        ctx.stroke();
      }
    }
  }
}

现在我想做的是，当我擦除这个粒子文本时，必须出现下一个文本。就像在这个网站上一样 https://animal.cc/ 。 任何人都可以帮助我:))

解决方法

（这与three.js无关）
当您确定“此粒子文本”已被删除时，您可以在 animate() 中执行此操作：

ctx.fillText("NEW ",30);
textCoordinates = ctx.getImageData(0,100,100);
init();

编辑：评论代码（下方）

  for (let y = 0,y2 = textCoordinates.height; y < y2; y++) {
    for (let x = 0,x2 = textCoordinates.width; x < x2; x++) {