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动图代替实际效果。如果想自己本地看实际效果，你可以点击 实际效果展示及源码下载。