CSS Canvas鼠标点击特效之天女散花（文本粒子动画）

1.效果

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
  <title>文本粒子动画</title>
</head>

<body>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    // 粒子类  
    class Particle {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 6 + 1; // 随机大小  
        this.velocityY = Math.random() * 10 - 0.5; // 垂直速度  
        this.velocityX = Math.random() * 20 - 1; // 水平速度  
        this.alpha = Math.random(); // 透明度  
        this.lifespan = Math.random() * 200 + 100; // 生命周期  
      }

      // 更新粒子  
      update() {
        this.x += this.velocityX;
        this.y += this.velocityY + 0.5; // 重力效果  
        this.alpha -= 0.01; // 随时间减少透明度  
        this.lifespan--;

        // 如果粒子生命周期结束，则移除它  
        if (this.lifespan <= 0) {
          return true;
        }

        // 设置颜色  
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `hsl(${360 * Math.random()}, 100%, 50%)`; // 随机颜色  
        ctx.fill();

        return false;
      }
    }

    // 粒子数组  
    let particles = [];

    // 渲染火焰  
    function renderFlame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      particles = particles.filter(particle => {
        return !particle.update();
      });

      requestAnimationFrame(renderFlame);
    }

    // 在鼠标移动时创建新的粒子  
    canvas.addEventListener('click', (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      // 清除之前的粒子（可选，如果你想在每次鼠标移动时都重新开始）  
      particles = [];

      // 在鼠标位置附近创建粒子  
      createFlame(x, y);
    });

    // 创建火焰（粒子）  
    function createFlame(x, y) {
      for (let i = 0; i < 100; i++) {
        // 为了使粒子从鼠标位置向四周扩散，可以添加一些随机性  
        const offsetX = (Math.random() - 0.5) * 50;
        const offsetY = (Math.random() - 0.5) * 50;
        particles.push(new Particle(x + offsetX, y + offsetY));
      }
    }

    // 开始渲染  
    renderFlame();

    // 窗口大小变化时调整canvas大小  
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  </script>
</body>

</html>

3.结语

文本粒子动画是一种引人注目的视觉效果，通过使用HTML5 Canvas和JavaScript实现，能够为网页增添活力和趣味。本文利用前端技术实现一个简单的文本粒子动画效果。

我们定义了一个粒子类，每个粒子具有自己的位置、大小、速度、透明度和生命周期等属性。通过不断更新粒子的位置、大小和透明度，再结合随机颜色填充，从而实现了点击鼠标会有天女散花般的动态效果。如果需要更改粒子，让它变成真的花花，参考这篇文章：爱心粒子特效