Ladies and 基佬们
本日我们来讲讲canvas动画。
从那里最先呢，曾儿时中印象迥殊深的就是黑客帝国了（别问我多大！
先发个链接，看的懂看过的的大牛这页能够关了，出门右拐是甘其食包子。

起首先聊聊这东西也许怎样完成的吧，假如不晓得canvas动画是怎样完成的话，那请戳

实在很早的时刻我不懂canvas动画怎样完成。。一向很疑心，厥后才晓得有clearRect这么流弊的要领，虽然觉得这个完成比较粗犷，但有用。

彷佛扯远了，前戏有点长了，我们进入正题吧。

为什么完成如许的结果，实在我们先天生一排汉纸，然后每一帧让他下移一行，这是第一步，like this,然后我们让他每一次着落的时刻很小概率能从新返回第一行然后再着落。。（什么不懂？！拖出去喂包子喂到死

再详细点。

var c=document.getElementById('c');
var ctx=c.getContext('2d');

// make him full screen
// 别问我为什么你本身写的时刻没全屏，注重我写了css
c.height=window.innerHeight;
c.width=window.innerWidth;

// 我们先把这段字符串变成数组。
var chinese="白色的野鹤啊,请将飞的本事借我一用";
chinese=chinese.split("");

// 同时我们把字体大小设置成10，用窗口大小除一下就是我们须要分红几列
var font_size=10;
var columns=c.width/font_size;

// 同时这个数组的每一项的值代表这个汉纸的行数，每一个一个最先都是直的(都是第一行
var drops=[];
for(var x=0; x < columns;x++){
  drops[x]=1;
}
// 然后我们每30毫秒实行一次这个动画，至于为什么是30，作者兴趣！
// 实在动画FPS很多是30帧，30帧意味着一秒实行30次，约莫每33毫秒实行一次
function draw(){
  // 每次都附上一层淡淡的黑色难过~~
  ctx.fillStyle="rgba(0,0,0,0.05)";
  ctx.fillRect(0,0,c.width,c.height);

  ctx.fillStyle="#0f0";
  ctx.font=font_size+"px";  

  // 然后我们最先画汉纸
  for(var i=0;i < drops.length;i++){
    // 先随机猎取个汉纸，然后画出来~
    var text=chinese[Math.floor(Math.random()*chinese.length)];
    ctx.fillText(text,i*font_size,drops[i]*font_size);


    // 假如这一行汉纸已逃出屏幕了，而且很小概率被我们发现了
    // 我们就把他抓返来放到第0行，让他再给读者老爷乐乐
    if(drops[i]*font_size > c.height && Math.random() > 0.99){
     drops[i]=0; 
    }

    // 我们鞭挞着他们行进~
    drops[i]++;
  }
}
setInterval(draw,1000/30);

So easy！又能够吃生长快乐了！

源码来自http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript