其實，程式碼也非常簡單啦。萬物皆有其屬性以及規律，我們要做的就是把這個特效的屬性以及規律用程式碼表示出來。一起來看看吧。
作圖之前，第一步當然是要準備“畫布”啦：
然後我們定義畫布的大小=網頁視窗的大小：
準備工作做好，我們就可以分析特效中的元素啦。首先要定義的就是螢幕裡掉落那些數字，我們希望掉落數字1-9
接下來，設定數字的大小，以及計算螢幕能夠放多少列。這裡我們設定大小為16個畫素，用螢幕寬度除以數字大小得到列數。
那麼數字從哪裡開始掉落呢？我們希望從最頂部開始掉落，於是我們還需要另一個數組來進行一下初始化，這個就是得到每一列y軸的座標啦。
好了，這些做好之後，我們就該開始繪製數字效果啦！
之前我們定義了我們需要的數字，我們希望隨機抽取一個，然後每一列都在視窗頂部開始。還記得我們剛才的初始化嗎，輸出文字時使用fillText()可以指定元素位置，i* font_size , drop[i] * font_size，就是指的每一列開始的橫座標與縱座標啦
到目前為止我們已經成功做出來一張可以鋪滿全屏的數字程式碼，但是這不併不是我們想要效果。
我們希望數字繪滿一頁後可以從頭再開始畫，同時我們還希望每一列程式碼長短不一——這個可以透過設定隨機數來實現，比如當隨機數大於0.9就重新開始繪製。
這樣迴圈效果是出來了，但是還是不好看，我們可以透過增添樣式，讓他好看一點，
好，這樣一來，完整的數字特效程式碼就寫出來了：
接下來就只需要讓他無限迴圈下去就好啦！
這樣就…等等，還沒有結束，還記得之前我們定義了畫布的大小=視窗的大小嗎，當我們開啟的時候他會計算你第一次開啟時視窗的大小，當我們改變視窗大小的時候，圖畫是不會跟著變的。
於是我們還需要在window上新增onresize事件，瀏覽器視窗改變時重新計算canvas的大小：
這樣才算真的大功告成！怎麼樣，是不是很簡（cai）單（guai）呢！
其實，程式碼也非常簡單啦。萬物皆有其屬性以及規律，我們要做的就是把這個特效的屬性以及規律用程式碼表示出來。一起來看看吧。
作圖之前，第一步當然是要準備“畫布”啦：
然後我們定義畫布的大小=網頁視窗的大小：
準備工作做好，我們就可以分析特效中的元素啦。首先要定義的就是螢幕裡掉落那些數字，我們希望掉落數字1-9
接下來，設定數字的大小，以及計算螢幕能夠放多少列。這裡我們設定大小為16個畫素，用螢幕寬度除以數字大小得到列數。
那麼數字從哪裡開始掉落呢？我們希望從最頂部開始掉落，於是我們還需要另一個數組來進行一下初始化，這個就是得到每一列y軸的座標啦。
好了，這些做好之後，我們就該開始繪製數字效果啦！
之前我們定義了我們需要的數字，我們希望隨機抽取一個，然後每一列都在視窗頂部開始。還記得我們剛才的初始化嗎，輸出文字時使用fillText()可以指定元素位置，i* font_size , drop[i] * font_size，就是指的每一列開始的橫座標與縱座標啦
到目前為止我們已經成功做出來一張可以鋪滿全屏的數字程式碼，但是這不併不是我們想要效果。
我們希望數字繪滿一頁後可以從頭再開始畫，同時我們還希望每一列程式碼長短不一——這個可以透過設定隨機數來實現，比如當隨機數大於0.9就重新開始繪製。
這樣迴圈效果是出來了，但是還是不好看，我們可以透過增添樣式，讓他好看一點，
好，這樣一來，完整的數字特效程式碼就寫出來了：
接下來就只需要讓他無限迴圈下去就好啦！
這樣就…等等，還沒有結束，還記得之前我們定義了畫布的大小=視窗的大小嗎，當我們開啟的時候他會計算你第一次開啟時視窗的大小，當我們改變視窗大小的時候，圖畫是不會跟著變的。
於是我們還需要在window上新增onresize事件，瀏覽器視窗改變時重新計算canvas的大小：
這樣才算真的大功告成！怎麼樣，是不是很簡（cai）單（guai）呢！