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

2019年9月13日 150次阅读 来源: Fakefish

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

    原文作者：Fakefish
    原文地址: https://segmentfault.com/a/1190000000381749
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞