基於canvas畫布的兩個炫酷效果展示

一、前面的碎碎叨

HTML5 canvas這個玩意用通俗的話來講就是一塊用來畫畫的布，不過這不是普通的布，這是個類似於神筆馬良的那個神筆一樣神奇的東西，可以畫出很多精湛美妙的東西。本文就展示兩個基於canvas的炫酷效果，可以讓我們對canvas的潛力有個比較直觀的認識。

二、canvas下的3D雪花飛舞效果

您可以狠狠地點選這裡：canvas下的3D雪花飛舞demo(我用最新的火狐瀏覽器試過，效果酷斃了。）

下圖為demo頁面的效果截圖：

使用
要實現該效果很簡單，直接載入一個JS檔案就可以了，類似下面：

<script src="http://www.zhangxinxu.com/study/js/effect/smoke.js"></script>

然後相關的CSS程式碼如下：

body { background-color: #cad5eb; }
canvas { position: fixed; top: 0px; z-index: 2;}

三、canvas下炫酷煙霧線條筆刷效果

您可以狠狠地點選這裡：canvas下炫酷煙霧線條筆刷demo(我用最新的火狐瀏覽器試過，效果酷斃了。）

滑鼠在頁面上隨便晃盪幾下就可以看到效果了哈：如煙如霧，輕盈飄渺的線條滑出優美的舞姿緊隨滑鼠之後。

使用
使用很簡單，頁面上嵌入下面這點JS就可以了：

<script src="http://www.zhangxinxu.com/study/js/effect/harmony.js"></script>
<script>harmony();</script>

然後相關的CSS程式碼如下：

body { background-color: #cad5eb; }
canvas { cursor:crosshair; position: fixed; top: 0px; z-index: 2;}

四、就這麼完了

好了，就這些。本文內容很少，純粹展示。哦，對了，無論是上面的雪花飛，還是下面的線條繪，只要瀏覽器支援canvas，你都可以以圖片的形式儲存下來的說~~

例如後面這個連結地址對應的圖片就是右鍵儲存canvas所得到的圖片：canvas.png。
//因為雪花是白色的，瀏覽器背景一般都是白色，所以直接在瀏覽器中看只有白花花的一片，建議右鍵 – [目標|連結]另存為檢視。

轉自：http://www.zhangxinxu.com/wordpress/?p=1630