分針網——IT教育：用js原生寫黑客帝國特效
阿新 • • 發佈：2017-05-12
想必大家都看過 黑客帝國 系列電影吧！先放一張圖片致敬一下經典。我們就來做一下裏面的背景特效吧：The Matrix
效果預覽
用到 HTML5 中的 canvas 知識； 使用 js 生成隨機的字符； 把整個頁面當做一個 canvas 畫布，把字符畫上去； 重復這個動作：生成字符、畫到頁面上。需要考慮的是每次字符在頁面的位置
HTML&CSS
頁面中只有一個 canvas 畫布，所以不需要什麽布局。
<!-- html --> <canvas id="content" width="1366px" height="768px"></canvas> <!-- css --> *{ margin: 0; padding: 0; }
1、因為 canvas 尺寸的改變會使裏面的內容重新繪制，所以為了不影響最後的效果，最好將這個值設置為本機的屏幕分辨率。（至於怎麽影響效果後面會講）
JS部分
同樣先上代碼：
var cav = document.getElementById(’content’); var w = window.screen.width; var h = window.screen.height; var yPositions = Array300).join(0).split(’’); var ctx = cav.getContext(’2d’); //初始化畫布 var draw = function(){ ctx.fillStyle = ’rgba(0,0,0,.05)’; ctx.fillRect(0,0,w,h); ctx.fillStyle = ’green’; ctx.font = ’20px’; yPositions.map(function(y,index){ text = String.fromCharCode(1e2 + Math.random() * 330); //生成隨機字母 x = index * 10; cav.getContext(’2d’).fillText(text,x,y); if (y > Math.random() * 1e4) { yPositions[index] = 0; } else { yPositions[index] = y + 10; } }); } setInterval(’draw()’,30);
1、首先獲取畫布；
2、獲取本機顯示器的分辨率：
var w = window.screen.width; var h = window.screen.height;
3、然後要在頁面中畫出一個矩形（這個就是整個特效的範圍）。前面說過，canvas 的尺寸會影響最後的效果，是因為，我們不能動態的改變 canvas 的尺寸（那樣會使 canvas 重新繪制），所以當頁面繪制好後我們再去調整瀏覽器的尺寸是就會產生白邊，你可以去試一下。。。
所以解決辦法就是直接把 canvas 的尺寸設置為屏幕的分辨率。這樣不管怎麽調整，瀏覽器的尺寸都不可能比屏幕還大吧。
ctx.fillStyle = ’rgba(0,0,0,.05)’; ctx.fillRect(0,0,w,h);
4、然後就應該考慮怎樣來生成隨機字符了。我們用了這樣一段代碼：
text = String.fromCharCode(1e2 + Math.random() * 330);
fromCharCode(num) 會返回一個 Unicode 編碼為num 字符。所以這句話理論上可以寫成 fromCharCode(Math.random * n) 。（只要 num 的範圍在 0000 - FFFF）
對於 Unicode 編碼，他為世界上所有的字符進行了編碼。十六進制範圍為從 0000 - FFFF，其中中文字段在 4E00-9FA5。 5、map(callback()) 方法創建一個新數組，其結果是該數組中的每個元素調用一個提供的函數。callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組本身。所以沒執行一次 draw() 函數會在 X 方向上生成一排的字符。
6、用 x 和 y 來指定字符在頁面中的位置。x 指定沒列字符占 10px 的寬度，y 同樣每次增加 10px，為每個字符在 y 方向占 10px 高度。當然每列字符不可能數量都相同，所以只要 y 的值大於一個隨機數之後新的字符就生成在頁面頂部。
x = index * 10; if (y > Math.random() * 1e4) { yPositions[index] = 0; } else { yPositions[index] = y + 10; }
7、忘記說了，再次之前要生成一個值全部為 0 的數組，主要控制字符的列數。
var yPositions = Array(300); yPositions.fill(0); //也可以這樣寫 //var yPositions = Array(300).join(0).split(’’);
完成。。。 完整項目下載：https://github.com/cwyaml/JavaScript-Programs
轉載：http://www.jianshu.com/p/b49e0897d62e
本文轉載自分針網
想學習更多IT知識可加群：272292492
分針網——IT教育：用js原生寫黑客帝國特效