Div層懸浮實現HTML5 Canvas背景動畫

在平常的學習中我接觸到一些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動圖代替實際效果。若是想本身本地看實際效果，你能夠點擊 實際效果展現及源碼下載。