使用HTML5创建炫酷背景粒子特效

17 min read

好的，以下是一个简单的HTML5背景粒子特效的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Particle Effect</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

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

      var particleArray = [];
      var colorArray = ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388'];

      var mouse = {
        x: null,
        y: null,
        radius: 70
      };

      window.addEventListener('mousemove', function (event) {
        mouse.x = event.x;
        mouse.y = event.y;
      });

      function Particle(x, y, directionX, directionY, size, colorArray) {
        this.x = x;
        this.y = y;
        this.directionX = directionX;
        this.directionY = directionY;
        this.size = size; 
        this.colorArray = colorArray;
      }

      Particle.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
        ctx.fillStyle = this.colorArray[Math.floor(Math.random() * colorArray.length)];
        ctx.fill();
      };

      Particle.prototype.update = function () {
        if (this.x + this.size > canvas.width || this.x - this.size < 0) {
          this.directionX = -this.directionX;
        }
        if (this.y + this.size > canvas.height || this.y - this.size < 0) {
          this.directionY = -this.directionY;
        }
        this.x += this.directionX;
        this.y += this.directionY;

        // mouse interact
        if (mouse.x - this.x < mouse.radius 
          && mouse.x - this.x > -mouse.radius 
          && mouse.y - this.y < mouse.radius
          && mouse.y - this.y > -mouse.radius) {
            if (this.size < 40) {
              this.size += 1;
            }
          } else if (this.size > 5) {
            this.size -= 1;
          }
          
        this.draw();
      };

      function init() {
        for (var i = 0; i < 100; i++) {
          var size = Math.random() * 10 + 5;
          var x = Math.random() * (innerWidth - size * 2) + size;
          var y = Math.random() * (innerHeight - size * 2) + size;
          var directionX = Math.random() * 3 - 1.5;
          var directionY = Math.random() * 3 - 1.5;
          var colorArray = colorArray;
          particleArray.push(new Particle(x, y, directionX, directionY, size, colorArray));
        }
      }

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

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

      init();
      animate();

      window.addEventListener('resize', function () {
        canvas.width = innerWidth;
        canvas.height = innerHeight;

        init();
      });

    </script>
  </body>
</html>

将上述代码保存为一个HTML文件，并在浏览器中打开该文件，即可看到一个简单的背景粒子特效。该特效包括100个带有不同大小和颜色的粒子，当鼠标接近粒子时，粒子的大小会增加。