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

我這幾天剛好學習了一下，也趁著此刻有時間從需求分析、知識點、程序編寫一步步給大家解剖下，要是在各位關公面前耍大刀了，可別見笑喲。

最終效果圖如下：

圖1

一、需求分析

1、圓形雪花

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

2、雪花數量固定

根據圖1仔細觀察白色雪花數量，飄落過程中，整張圖的雪花數量應該是固定的，這個需求是需要通過我們觀察分析所得。這與我們現實生活中看到一幅雪花滿天飛的場景是一致的。

3、雪花大小不一致

每朵雪花它們大小各有不同，也就意味著雪花的半徑是隨機的。這與我們現實生活中看到一幅雪花滿天飛的場景也是一致的。

4、雪花位置在移動

雪花飄落，自然它們的位置也在移動。

二、知識點

1、使用Html5 Canvas+JavaScript畫圓——構成圓形雪花

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

2、隨機數—產生不同半徑、坐標的圓形雪花

本示例中，網頁第一次加載時，需要生成一定數量的不同半徑及位置的雪花，故半徑、坐標為隨機數；雪花在飄落過程中，其半徑不變，坐標在一定幅度內變化，故此時坐標也為隨機數——Math.random() 

三、程序編寫

1、準備工作

放一個畫布canvas，并且設置整個body背景色為黑色

HTML代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表