既然是修行，不賣弄關子，不吊胃口，修行成果必須先曬一曬。
下圖是我用canvas畫的黑客帝國代碼雨，想起當年看黑客帝國時，那個代碼雨場景讓我心曠神怡，大開腦洞，滿腦子是那種三維空間，無數0和1像雨一樣往下落。
如今不到50行js代碼就能實現它，實在是很雞凍啊！
如何實現？
這個效果看似紛繁眼花，但你剝掉這有點華麗的衣裳，是沒多少肉啲。
大部分邏輯我都在代碼里寫注釋了，就40多行代碼，碼咖們分分鍾就能看完啦，我這就簡單介紹一下思路：
1、生成代碼雨：
代碼雨由N列“代碼”組成，每列“代碼”由於M個代碼組成，每個“代碼”看作一個對象，它有四個屬性，分別是：x坐標、y坐標、速度、內容。
各列的速度和初始位置不一樣才會有錯落有致的感覺，但每列中的每個“代碼”的速度卻要一樣。
2、下雨：
就是讓每個代碼按照自己的速度增加y坐標，當“代碼”落到底部時，重置到頂部重新降落。
以下是包含html的完整代碼，是不是很少啊。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>黑客帝國代碼雨</title> 6 <style type="text/css"> 7 html,body{width: 100%;height: 100%;} 8 body{ 9 background: #000; 10 overflow: hidden; 11 margin: 0; 12 padding: 0; 13 } 14 </style> 15 </head> 16 <body> 17 <canvas id="cvs"></canvas> 18 <script type="text/javascript"> 19 var cvs = document.getElementById("cvs"); 20 var ctx = cvs.getContext("2d"); 21 var cw = cvs.width = document.body.clientWidth; 22 var ch = cvs.height = document.body.clientHeight; 23 //動畫繪制對象 24 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 25 var codeRainArr = []; //代碼雨數組 26 var cols = parseInt(cw/14); //代碼雨列數 27 var step = 16 ; //步長，每一列內部數字之間的上下間隔 28 ctx.font = " 14px microsoft yahei"; //聲明字體，個人喜歡微軟雅黑 29 //創建代碼雨 30 function createCodeRain() { 31 for (var n = 0; n < cols; n++) { 32 var col = []; 33 //基礎位置，為了列與列之間產生錯位 34 var basePos = parseInt(Math.random()*300); 35 //隨機速度 3~13之間 36 var speed = parseInt(Math.random()*10)+3; 37 //每組的x軸位置隨機產生 38 var colx = parseInt(Math.random()*cw) 39 for (var i = 0; i < parseInt(ch/step)/2; i++) { 40 var code = { 41 x : colx, 42 y : -(step*i)-basePos, 43 speed : speed, 44 text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //隨機生成0或者1 45 // text : ["a","b","c","d","e","f","g","h","o","s","x"][parseInt(Math.random()*11)] //隨機生成字母數組中的一個 46 } 47 col.push(code); 48 } 49 codeRainArr.push(col); 50 } 51 } 52 //代碼雨下起來 53 function codeRaining(){ 54 //把畫布擦干凈 55 ctx.clearRect(0,0,cw,ch); 56 for (var n = 0; n < codeRainArr.length; n++) { 57 //取出列 58 col = codeRainArr[n]; 59 //遍歷列，畫出該列的代碼 60 for (var i = 0; i < col.length; i++) { 61 var code = col[i]; 62 if(code.y > ch){ 63 //如果超出下邊界則重置到頂部 64 code.y = 0; 65 }else{ 66 //勻速降落 67 code.y += code.speed; 68 } 69 //顏色也隨機變化 70 ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 71 //把代碼畫出來 72 ctx.fillText(code.text,code.x,code.y); 73 } 74 } 75 requestAnimationFrame(codeRaining); 76 } 77 //創建代碼雨 78 createCodeRain(); 79 //開始下雨吧 GO>> 80 requestAnimationFrame(codeRaining); 81 </script> 82 </body> 83 </html>
尾感：
這是我發布的第一篇技術博客，嘮叨一下我的感悟。
曾經很想寫博客，這種念頭在腦洞里滋生盤踞不是一兩年了，如今終於蠕動出腦付諸實踐。為什么說蠕動呢？實在是來之不易啊！
因為有四大結症：一是自卑，二是怕，三是懶，四是沒方向。
想要破土重生那就只能對症下葯，消滅結症。
1.對付自卑：
以前在我印象中，博客應該是高大上的殿堂，全是大牛大咖。但在我的工作中，查閱資料時也看了很多博客。握草，簡直污得不要不要的，就靠標題支撐，正文無解析，內容無深度，代碼無注釋的文章也有很多的閱讀量。這樣的都行，為啥子我不行呢，比上不足比下有余，我不求與大神齊肩，但求比污博高個頭，信心有點豎起來了呢。
2.克服怕：
博客就像是豎立在廣場上的雕像，誰都可以評頭論足。在如今，我想噴子應該是最多的，逮着缺陷就想噴，發現槽點就要吐。沒有如廁的心態可能要被噴出抑郁症，打擊自信。那如何練就如廁所般隨你噴隨你吐的心態呢？我是去看彈幕直播，美女/游戲/戶外等直播，如果敢當主播那更有效。因為你會看到彈幕上噴子們花樣百出的噴法，而且是實時的，主播還得微笑面對，光是看看我都有如廁般的心態了。在回頭看看博客這種滯后的又少還很low的噴語，小case小case了。
3.戒掉懶：
懶就是個坑貨，因為懶，美眉們有名花有主；因為懶，失去了升職加薪的機會；因為懶，能力提升宛如蝸牛；因為懶，小伙伴們已另尋新歡；因為懶，讓跑步機蒙塵……
懶還真的不好應對，我使用了一大法寶：成就感，為了成就感就會有動力，有動力就會變得勤快。就比如上面的代碼雨，它成就了我對黑客帝國的幻想，讓我更有動力去學習canvas，實現更多的幻想。
4.找到方向：
換句話說就是找到目標，即你准備寫什么？技術海洋寬闊無邊，每天都有新的技術流入到技術海洋，也有好多技術在蒸發。我就一個平凡的碼農，還是隨大流，往風口浪尖去擠吧，機會來了，就算一只豬也會飛上天。我現在既然是個前端，當然得關注前端熱門的技術咯，我覺得H5,canvas,svg,react,node,git,gulp,css3,less,sass,ES6等都是熱潮啊。
我願我能持續燃燒這種熱情，之前有看過一篇文章：《即便沒有讀者，你也要寫博客》 ，其中講解了很多寫博客的好處，受益匪淺。
感謝CGod丶提出的修改建議。
如果您有更好的建議，歡迎留言，共同進步。
參考資料：
RequestAnimationFrame更好的實現Javascript動畫
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。