canvas 文字瀑布动画

  • A+
所属分类:HTML5 javascript

在线测试


//created by PDSLLY Date: 2017.06.25
function draw(cof, x, y, ctx, set){
      let t = null;
      let l = cof.txt.length;
      ctx.fillStyle = cof.color;
      for( let m = 0; m < x; m++ ){ (set[m] > y) && (set[m] = Math.random()>0.875?0:set[m]);
            t = cof.txt[set[m]%l];
            ctx.fillText(t, m*cof.size, (++set[m])*cof.size);
      }
      ctx.fillStyle = 'rgba(0,0,0,.05)';
      ctx.fillRect(0, 0, cof.w, cof.h);
}
function init(){
      let mycan = document.querySelector('#mycan');
      let ctx = mycan.getContext('2d');
      let _w = window.innerWidth;
      let _h = window.innerHeight;
      let cof = {
            txt: '测试测试',
            size: 20,
            color: '#0f0',
            font: '20px Microsoft Yahei',
            w: _w,
            h: _h
      }
      let x = _w/cof.size>>0;
      let y = _h/cof.size>>0;
      let set = new Array(x);
      set.fill(0);
      mycan.setAttribute('width', _w);
      mycan.setAttribute('height', _h);
      setInterval( function(){
            draw(cof, x, y, ctx, set);
      }, 50 )
}
init();
weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: