H5+Canvas炫酷3D线条延伸动画特效

js代码

<script>
;(function() {
  'use strict';
  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;
  
  function prj(obj) {
    var cz = obj.z + fl;
    if(cz === 0) return;
    var scl = fl / cz;
    obj.p.x = cx + obj.x * scl;
    obj.p.y = cy + obj.y * scl;
    obj.s = scl;
  }
  
  var P = function(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.s = 1;
    this.cl = 0;
    this.p = {
      x: 0,
      y: 0
    };
  };