jquery 几何粒子

jQuery 几何粒子是一种很酷的动画效果。通过使用这个技术，可以在网站上创建许多动态的、响应式的粒子效果。

    $(document).ready(function(){
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      var width = canvas.width;
      var height = canvas.height;
      
      var Particle = function(){
        this.x = Math.random()*width;
        this.y = Math.random()*height;
        this.vx = Math.random()*0.5-0.25;
        this.vy = Math.random()*0.5-0.25;
        this.radius = Math.random()*2+1;
      };
      
      Particle.prototype.move = function(){
        this.x += this.vx;
        this.y += this.vy;
        
        if (this.x < 0) {
          this.x = width;
        } else if (this.x > width) {
          this.x = 0;
        }
        
        if (this.y < 0) {
          this.y = height;
        } else if (this.y > height) {
          this.y = 0;
        }
      };
      
      Particle.prototype.draw = function(){
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        context.fillStyle = "white";
        context.fill();
      };
      
      var particles = [];
      for (var i=0; i<300; i++) {
        particles.push(new Particle());
      }
      
      function draw() {
        context.clearRect(0, 0, width, height);
        for (var i=0; i


以上代码是使用 jQuery 制作几何粒子的样例。通过使用 canvas 绘制粒子来实现动画效果。使用 Math.random() 函数随机生成粒子在 x 和 y 方向上的位置、速度和半径，然后使用 requestAnimationFrame() 函数循环绘制粒子，产生粒子移动的动态效果。同时，可以使用 CSS 对粒子的颜色、位置等属性进行自定义调整，从而获得不同的效果。