css3+HTML5 Canvas酷炫3D線條延伸動畫特效

<腳本>
;（功能（） {
  '使用嚴格'；
  var c = document.getElementById('c');
  var ctx = c.getContext('2d');
  var w = c.width = window.innerWidth;
  var h = c.height = window.innerHeight;
  var cx = w / 2;
  var cy = h / 2;
  var fl = 1000；
  
  函數 prj(obj) {
    var cz = obj.z + fl;
    如果（cz === 0）返回；
    var scl = fl / cz;
    obj.p.x = cx + obj.x * scl;
    obj.p.y = cy + obj.y * scl;
    obj.s = scl;
  }
  
  var P = 函數(x, y, z) {
    這個.x = x;
    這個.y = y;
    這個.z = z;
    這個.s = 1;
    這個.cl = 0;
    這個.p = {
      x：0，
      y：0
    };
  };
  P.原型 = {
    構造函數：P，
    更新：函數（）{
      這個.z -= 30;
    },
    渲染：函數（ctx）{
      if(this.z <= -fl) 返回；
      ctx.save();
      ctx.translate(this.p.x, this.p.y);
      ctx.scale(這個.s,這個.s);
      ctx.fillStyle = 'hsla(' + this.cl + ', 100%, 50%, 0.5)';
      ctx.beginPath();
      ctx.arc(0, 0, 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  };
  var M = 函數(x, y, z) {
    this.list = [];
    這個.max = 100;
    這個.x = x;
    這個.y = y;
    這個.z = z;
    這個.s = 1;
    這個.p = {
      x：0，
      y：0
    };
    this.ax = Math.random() * (Math.PI * 2);
    this.ay = Math.random() * (Math.PI * 2);
    this.rx = Math.random() * 100;
    this.ry = Math.random() * 100;
    this.cl = Math.random() * 360;
    this.cls = Math.random();
  };
  M.原型 = {
    建構函數：M，
    更新：函數（）{
      這個.cl += 這個.cls;
      this.ax += Math.random() * 0.1 - 0.02;
      this.ay += Math.random() * 0.1 - 0.02;
      this.x = Math.cos(this.ax) * 100;
      this.y = Math.sin(this.ay) * 100;
      這個.z += 10;
      if(this.z > fl) this.z = fl;
      
      if(this.list.length < this.max) {
        if(Math.random() * 100 < 50) {
          var pp = new P(this.x, this.y, this.z);
          pp.cl = this.cl;
          this.list.push(pp);
        }
      } 別的 {
        var pp = this.list.shift();
        pp.x = this.x;
        pp.y = this.y;
        pp.z = this.z;
        pp.cl = this.cl;
        this.list.push(pp);
      }
    },
    渲染：函數（ctx）{
      if(this.z <= -fl) 返回；
      ctx.save();
      ctx.translate(this.p.x, this.p.y);
      ctx.fillStyle = '綠色';
      ctx.beginPath();
      ctx.arc(0, 0, 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  };
  
  函數更新（mv，列表）{
    for(var i = 0; i < list.length; i++) {
      var p = 列表[i];
      p.update();
      prj(p)；
      p.渲染（ctx）；
    }
    
    for(var i = list.length-1; i >= 0; i--) {
      var p = 列表[i];
      if(p.z <= -fl) 繼續；
       if(i === 列表.length - 1) {
         ctx.lineWidth = Math.random();
         ctx.StrongStyle = 'hsl(' + mv.cl + ', 100%, 50%)';
         ctx.beginPath();
         ctx.moveTo(p.p.x, p.p.y);
       } 別的 {
         ctx.lineTo(p.p.x, p.p.y);
       }
    }
    ctx. 中風();
  }
  
  var ms = [];

  for(var i = 0; i < 10; i++) {
    ms.push(新M(
      Math.random() * 400 - 200,
      Math.random() * 400 - 200,
      Math.random() * 400 - 200));
  }

  requestAnimationFrame(函數迴圈() {
    請求動畫幀（循環）；
    ctx.clearRect(0, 0, w, h);
    
    for(var i = 0; i < ms.length; i++) {
      var m = ms[i];
      m.update();
      prj(米)；
      更新（m，m.列表）；
    }
   
  });
})();
</劇本>

這是一款基於HTML5 Canvas的酷炫3D線條延伸動畫效果，色彩變幻，非常漂亮！