在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站 的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更有設計感。
網站發佈後，有程序開發的小夥伴和站長詢問怎麼實現的，我也樂於分享將使用的開源組件和實現告訴大家。有些同學還是不太明白，我答應後面寫一篇博客來的。前幾個月一直focus在網站的一些新功能上和幫忙解決一些定製問題，今天才開始動手寫這篇博客來分享我的實現思路。
在本文中我將以本網站標誌性的 Particleground粒子動畫（github） 作爲實例進行講解，如何進行實現。先貼出 Particleground官方demo （如下圖），讓大家對粒子動畫有個直觀的瞭解。這裏也非常感謝Horia Dragomir貢獻了這個非常震撼的HTML5 Canvas動畫。
在融合HTML5 Canvas動畫的過程中，我並不想讓HTML5 Canvas動畫佔用網頁的版面，而是作爲背景動畫。正如你所看到的，官方的demo已經給出了這樣的例子，tiomg.org的登錄頁面也是這麼去實現。canvas作爲背景層進行動畫繪製，內容文字層懸浮在canvas上面。簡化的代碼是這樣：
<div>
<canvas>
<div style="position: absolute;">浮動在canvas上的文字/內容</div>
</div>
官方demo html截圖：
到這裏Canvas全背景動畫問題已經順利的解決了。但是在開發 tiomg.org 網站的時候，我有了一個更有趣的想法，我希望Canvas背景動畫不是佔滿整個頁面的背景，而是頁面的一塊區域，高度是由子元素來決定，並且完全兼容bootstrap響應式設計。就像是我們常用的CSS背景圖片：background-image: url(bgimage.gif);，一般我們給父元素添加background-image，子元素（透明）撐開並決定父元素的大小。
HTML5 <canvas> 標籤用於作爲繪製圖像的容器（通常是 JavaScript），並不能像圖片那樣作爲其它HTML標籤的背景，只能考慮層浮動來實現。如何“懸浮”，是想讓一個層疊加在另一個層上？我們可以利用相對定位和絕對定位來實現。例如: 你在父元素上設置position:relative; 在子元素上設置position:absolute;，這樣子元素就可以”懸浮”在父元素上面了。最重要的是，我還設置了一個position:relative;的子元素使其浮動在canvas上，撐開並決定父元素的大小。
這裏貼出HTML簡化代碼：
<div style="position: relative;">
<div style=" width: 100%; height: 100%; position: absolute;">
<canvas>
</div>
<div style="position: relative;">
浮動在canvas上的文字/內容
</div>
</div>
因爲不能運行js代碼，我錄製了本地網頁的gif動圖代替實際效果。如果想自己本地看實際效果，你可以點擊 實際效果展示及源碼下載。
