五一剛過，今天給大家做一個黑客帝國特效吧，大家應該都看過黑客帝國 系列電影吧！先放一張圖片致敬一下經典。

這裡還是要說一下我的前端學習群：594959296，來的可以說都是我們大前端的學霸啊，不定期分享乾貨。想學到東西的都可以來，歡迎初學和進階中的小夥伴

我們就來做一下里面的背景特效吧：The Matrix

這裡還是要說一下我的前端學習群：594959296，從我一個人到現在的1461人都是我每篇文章每個特效聚集的小夥伴，可以說都是我們大前端的學霸啊，不定期分享乾貨。想學到東西的都可以來，歡迎初學和進階中的小夥伴

項目分析

1、用到 HTML5 中的 canvas 知識；

2、使用 js 生成隨機的字符；

3、把整個頁面當做一個 canvas 畫布，把字符畫上去；

4、重複這個動作：生成字符、畫到頁面上。需要考慮的是每次字符在頁面的位置。

HTML&CSS部分

頁面中只有一個 canvas 畫布，所以不需要什麼佈局。

1、因為 canvas 尺寸的改變會使裡面的內容重新繪製，所以為了不影響最後的效果，最好將這個值設置為本機的屏幕分辨率。（至於怎麼影響效果後面會講）

2、取消瀏覽器默認的 margin 和 padding

JS部分

1、首先獲取畫布；

2、獲取本機顯示器的分辨率：

3、然後要在頁面中畫出一個矩形（這個就是整個特效的範圍）。前面說過，canvas 的尺寸會影響最後的效果，是因為，我們不能動態的改變 canvas 的尺寸（那樣會使 canvas 重新繪製），所以當頁面繪製好後我們再去調整瀏覽器的尺寸是就會產生白邊，你可以去試一下。。。

所以解決辦法就是直接把 canvas 的尺寸設置為屏幕的分辨率。這樣不管怎麼調整，瀏覽器的尺寸都不可能比屏幕還大吧。

4、然後就應該考慮怎樣來生成隨機字符了。我們用了這樣一段代碼：

5、map(callback()) 方法創建一個新數組，其結果是該數組中的每個元素調用一個提供的函數。callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組本身。所以沒執行一次 draw()
函數會在 X 方向上生成一排的字符。

6、用 x 和 y 來指定字符在頁面中的位置。x 指定沒列字符佔 10px 的寬度，y 同樣每次增加 10px，為每個字符在 y 方向佔 10px 高度。當然每列字符不可能數量都相同，所以只要 y 的值大於一個隨機數之後新的字符就生成在頁面頂部。

7、忘記說了，再次之前要生成一個值全部為 0 的數組，主要控制字符的列數。

學習javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是幹啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注後回覆‘給我資料’可以領取一套完整的學習視頻