【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