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动图代替实际效果。若是想本身本地看实际效果，你能够点击 实际效果展现及源码下载。