html旋转粒子效果代码

颜良俊 3个月前 33浏览 0评论

HTML旋转粒子效果是一种非常炫酷的效果,在网页中经常使用,可以增加网页的视觉效果,让页面更加吸引人。下面是一个示例代码:

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>旋转粒子效果</title>
    <style>
       body { margin: 0; padding: 0; }
       canvas { display: block; }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script>
       var canvas = document.querySelector('canvas');
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;

       var c = canvas.getContext('2d');

       var mouse = {
          x: undefined,
          y: undefined
       }

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

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

          init();
       });

       function Circle(x, y, dx, dy, radius) {
         this.x = x;
         this.y = y;
         this.dx = dx;
         this.dy = dy;
         this.radius = radius;
         this.colorArray = [
            '#00bdff',
            '#4d39ce',
            '#088eff',
            '#15c216',
            '#e8e809',
         ];
         this.color = this.colorArray[Math.floor(Math.random() * this.colorArray.length)];

         this.draw = function() {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
         }

         this.update = function() {
            if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
               this.dx = -this.dx;
            }
            if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
               this.dy = -this.dy;
            }

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

            if (mouse.x - this.x < 50 && mouse.x - this.x > -50
                && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
               if (this.radius < 40) {
                  this.radius += 1;
               }
            } else if (this.radius > 2) {
               this.radius -= 1;
            }

            this.draw();
         }
       }

       var circleArray = [];

       function init() {

          circleArray = [];

          for (var i = 0; i < 800; i++) {
             var radius = Math.random() * 3 + 1;
             var x = Math.random() * (innerWidth - radius * 2) + radius;
             var y = Math.random() * (innerHeight - radius * 2) + radius;
             var dx = (Math.random() - 0.5) * 2;
             var dy = (Math.random() - 0.5) * 2;
             circleArray.push(new Circle(x, y, dx, dy, radius));
          }

       }

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

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

       init();
       animate();
    </script>
  </body>
  </html>

上面这段代码中,使用了HTML5的canvas标签来创建一个canvas画布,并使用JavaScript来生成随机的粒子并让它们旋转。当鼠标移到粒子附近时,粒子会变大。