圣誕主題針對(duì)飄雪的進(jìn)一步升級(jí)，采用比較時(shí)髦的canvas實(shí)現(xiàn)。這里我將一步一步分析這個(gè)飄雪的實(shí)現(xiàn)步驟，看是挺復(fù)雜的，真正理解了其實(shí)也就那么一回事。
我的分解步驟是這樣的：單個(gè)雪花的實(shí)現(xiàn)=》多個(gè)雪花的隨機(jī)布局=》雪花運(yùn)動(dòng)的算法=》雪花類的封裝
單個(gè)雪花的實(shí)現(xiàn)
參考右邊的代碼區(qū)域snowflake.js與效果區(qū)域的一個(gè)圓形的圖形。對(duì)的，就是一個(gè)大圓形，這是便于大家觀察所以特意放大了?？s小后就小雪花了，嘿嘿!!!
代碼很簡單，通過canvas提供的方法畫出一個(gè)圓形就可以了，參考snowflake.js文件。canvas中有一個(gè)act方法，arc的作用是畫一個(gè)正規(guī)的圓弧，可以是一個(gè)完整的圓，也可以是一個(gè)圓的某一段弧線。
arc的語法如下：arc(圓心x,圓心y,半徑,開始的角度,結(jié)束的角度,是否逆時(shí)針)。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
如果我們用arc畫一個(gè)完整的圓，該怎么搞？大家注意到參數(shù)中有個(gè)開始角度與結(jié)束角度，如果我們開始角度是0，結(jié)束角度是360，不就是個(gè)正圓了？ 正解！但要注意的是，這里的角度是用“弧度”來表示的（Flash也是如此），一個(gè)完整的圓即360度，就是2PI弧度。
arc也是畫的路徑，所以我們要在他后面調(diào)用填充或描邊的方法才能顯出圖形(代碼中采用了RBG的白色fillStyle與透明度填充)。
最后要記得加beginPath與closePath了，因?yàn)閏anvas中的繪制方法（如stroke,fill），都會(huì)以“上一次beginPath”之后的所有路徑為基礎(chǔ)進(jìn)行繪制。加上這個(gè)是為了開辟一個(gè)新的路徑?？偠灾?，就是不要企圖通過閉合現(xiàn)有路徑來開始一條新路徑，而開始一條新路徑，以前的路徑也不會(huì)閉合。
最后的效果參考右邊的代碼區(qū)域，通過arc畫圓形，fillStyle填充顏色與透明度，beginPath與closePath規(guī)劃一個(gè)新的路徑，通過fill方法讓fillStyle 屬性所指定的顏色、漸變和模式來填充當(dāng)前路徑。
在snowflake.js文件11行處填入任務(wù)代碼
定義一個(gè)圓弧，大小是100，半徑是50，角度是360，逆時(shí)針旋轉(zhuǎn)
canvasContext.arc(100, 100, 50, 0, Math.PI * 2, true);
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)
