【Canvas动画系列】之流弊黑客帝国

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