看到網(wǎng)上很多展示html5雪花飛動(dòng)的效果，確實(shí)非常引人入勝，我相信大家也跟我一樣看著心動(dòng)的同時(shí)，也很好奇，想研究下代碼如何實(shí)現(xiàn)；雖然很多地方也能下載這些源碼，不過(guò)也不知道別人制作此類動(dòng)畫(huà)時(shí)的思路及難點(diǎn)分析。

我這幾天剛好學(xué)習(xí)了一下，也趁著此刻有時(shí)間從需求分析、知識(shí)點(diǎn)、程序編寫(xiě)一步步給大家解剖下，要是在各位關(guān)公面前耍大刀了，可別見(jiàn)笑喲。

最終效果圖如下：

圖1

一、需求分析

1、圓形雪花

本示例中雪花形狀使用圓形

2、雪花數(shù)量固定

根據(jù)圖1仔細(xì)觀察白色雪花數(shù)量，飄落過(guò)程中，整張圖的雪花數(shù)量應(yīng)該是固定的，這個(gè)需求是需要通過(guò)我們觀察分析所得。這與我們現(xiàn)實(shí)生活中看到一幅雪花滿天飛的場(chǎng)景是一致的。

3、雪花大小不一致

每朵雪花它們大小各有不同，也就意味著雪花的半徑是隨機(jī)的。這與我們現(xiàn)實(shí)生活中看到一幅雪花滿天飛的場(chǎng)景也是一致的。

4、雪花位置在移動(dòng)

雪花飄落，自然它們的位置也在移動(dòng)。

二、知識(shí)點(diǎn)

1、使用Html5 Canvas+JavaScript畫(huà)圓——構(gòu)成圓形雪花

在Html5中，需要使用Canvas同時(shí)借助JavaScript畫(huà)圓，以構(gòu)成圓形雪花——arc(x,y,r,start,stop)；

2、隨機(jī)數(shù)—產(chǎn)生不同半徑、坐標(biāo)的圓形雪花

本示例中，網(wǎng)頁(yè)第一次加載時(shí)，需要生成一定數(shù)量的不同半徑及位置的雪花，故半徑、坐標(biāo)為隨機(jī)數(shù)；雪花在飄落過(guò)程中，其半徑不變，坐標(biāo)在一定幅度內(nèi)變化，故此時(shí)坐標(biāo)也為隨機(jī)數(shù)——Math.random() 

三、程序編寫(xiě)

1、準(zhǔn)備工作

放一個(gè)畫(huà)布canvas，并且設(shè)置整個(gè)body背景色為黑色

HTML代碼：

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表