css3+HTML5 キャンバスのクールな 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;
    if(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) {
    this.x = x;
    this.y = y;
    これ.z = z;
    this.s = 1;
    this.cl = 0;
    this.p = {
      ×：0、
      y:0
    };
  };
  P.プロトタイプ = {
    コンストラクター: P、
    更新: function() {
      this.z -= 30;
    }、
    レンダリング: function(ctx) {
      if(this.z <= -fl) return;
      ctx.save();
      ctx.translate(this.p.x, this.p.y);
      ctx.scale(this.s, this.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 = [];
    this.max = 100;
    this.x = x;
    this.y = y;
    これ.z = z;
    this.s = 1;
    this.p = {
      ×：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、
    更新: function() {
      this.cl += this.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;
      this.z += 10;
      if(this.z > fl) this.z = fl;
      
      if(this.list.length < this.max) {
        if(Math.random() * 100 < 50) {
          var pp = 新しい 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);
      }
    }、
    レンダリング: function(ctx) {
      if(this.z <= -fl) return;
      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();
    }
  };
  
  関数 update(mv, list) {
    for(var i = 0; i < list.length; i++) {
      var p = リスト[i];
      p.update();
      prj(p);
      p.render(ctx);
    }
    
    for(var i = list.length-1; i >= 0; i--) {
      var p = リスト[i];
      if(p.z <= -fl) 続行;
       if(i === list.length - 1) {
         ctx.lineWidth = Math.random();
         ctx.ストロークスタイル = '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(関数ループ() {
    requestAnimationFrame(ループ);
    ctx.clearRect(0, 0, w, h);
    
    for(var i = 0; i 
これは HTML5 Canvas 绘制に基づく一款ベースの炫酷 3D 線条延伸アニメーション画特效、多彩颜色变幻非常、漂亮！