html制作浮层,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上面。简化的代码是这样：

浮动在canvas上的文字/内容

官方demo html截图：