无码国产午夜福利_色窝窝51精品_欧美日本一道本_国产高潮流白浆视频_亚洲伊甸园在线无码

代碼雨代碼大全，代碼雨代碼這個(gè)很多人還不知道,現(xiàn)在讓我們一起來看看吧！

1、代碼雨特效教程 更文時(shí)間：2018/04/08　　新的嘗試　　嘗試一下新的寫作吧，這是第一篇技術(shù)類的文章（筆記…），以后可以也會(huì)繼續(xù)更。

2、希望自己能寫得出小白也能看得懂的東西。

(資料圖片)

3、（當(dāng)然最重要的是自己懂啦..hhhh）　　代碼雨特效　　相信大家都看過黑客帝國，代碼雨的特效給人留下了比較深的印象，那么，這樣的特效用代碼是怎樣寫出來的呢？　　其實(shí)，代碼也非常簡(jiǎn)單啦。

4、萬物皆有其屬性以及規(guī)律，我們要做的就是把這個(gè)特效的屬性以及規(guī)律用代碼表示出來。

5、一起來看看吧。

6、　　作圖之前，第一步當(dāng)然是要準(zhǔn)備“畫布”啦：　　然后我們定義畫布的大小=網(wǎng)頁窗口的大?。骸　?zhǔn)備工作做好，我們就可以分析特效中的元素啦。

7、首先要定義的就是屏幕里掉落那些數(shù)字，我們希望掉落數(shù)字1-9　　接下來，設(shè)置數(shù)字的大小，以及計(jì)算屏幕能夠放多少列。

8、這里我們?cè)O(shè)置大小為16個(gè)像素，用屏幕寬度除以數(shù)字大小得到列數(shù)。

9、　　那么數(shù)字從哪里開始掉落呢？我們希望從最頂部開始掉落，于是我們還需要另一個(gè)數(shù)組來進(jìn)行一下初始化，這個(gè)就是得到每一列y軸的坐標(biāo)啦。

10、　　好了，這些做好之后，我們就該開始繪制數(shù)字效果啦！　　之前我們定義了我們需要的數(shù)字，我們希望隨機(jī)抽取一個(gè)，然后每一列都在窗口頂部開始。

11、還記得我們剛才的初始化嗎，輸出文字時(shí)使用fillText()可以指定元素位置，i* font_size , drop[i] * font_size，就是指的每一列開始的橫坐標(biāo)與縱坐標(biāo)啦　　到目前為止我們已經(jīng)成功做出來一張可以鋪滿全屏的數(shù)字代碼，但是這不并不是我們想要效果。

12、　　我們希望數(shù)字繪滿一頁后可以從頭再開始畫，同時(shí)我們還希望每一列代碼長(zhǎng)短不一——這個(gè)可以通過設(shè)置隨機(jī)數(shù)來實(shí)現(xiàn)，比如當(dāng)隨機(jī)數(shù)大于0.9就重新開始繪制。

13、　　這樣循環(huán)效果是出來了，但是還是不好看，我們可以通過增添樣式，讓他好看一點(diǎn)，　　好，這樣一來，完整的數(shù)字特效代碼就寫出來了：　　接下來就只需要讓他無限循環(huán)下去就好啦！　　這樣就…等等，還沒有結(jié)束，還記得之前我們定義了畫布的大小=窗口的大小嗎，當(dāng)我們打開的時(shí)候他會(huì)計(jì)算你第一次打開時(shí)窗口的大小，當(dāng)我們改變窗口大小的時(shí)候，圖畫是不會(huì)跟著變的。

14、　　于是我們還需要在window上添加onresize事件，瀏覽器窗口改變時(shí)重新計(jì)算canvas的大?。骸　∵@樣才算真的大功告成！怎么樣，是不是很簡(jiǎn)（cai）單（guai）呢！THE END免責(zé)聲明：本文來自騰訊新聞客戶端自媒體，不代表騰訊網(wǎng)的觀點(diǎn)和立場(chǎng)。

本文到此分享完畢，希望對(duì)大家有所幫助。

標(biāo)簽：