HTML5Canvas背景动画

是通过浮动Div层实现的。在日常的学习中，接触到了一些HTML5Canvas的动画。在开发tiomg.org台美在线工具网站的时候，想把这些震撼或者小清新的动画融入到工具网站中，可以让原本单调的网页看起来丰富，更有设计感。网站发布后，一些程序开发伙伴和站长询问如何实现。也很乐意把将要用到的开源组件和实现分享给大家。有的同学还是不明白，我答应过会儿写博客。在过去的几个月里，我一直在关注网站的一些新功能，并帮助解决一些定制问题。今天才开始写这篇博客，分享一下我的实现思路。在这篇文章中，我将以本站标志性的Particleground粒子动画（github）为例，讲解如何实现。先贴出Particleground的官方demo（如下图），让大家对粒子动画有一个直观的认识。这里也非常感谢HoriaDragomir贡献了这个非常震撼的HTML5Canvas动画。在集成HTML5Canvas动画的过程中，我不希望HTML5Canvas动画占据网页的布局，而是作为背景动画。可以看到，官方demo已经给出了这样的例子，tiomg.org的登录页面也是这样实现的。画布作为动画绘制的背景层，内容文本层悬浮在画布上方。简化后的代码是这样的：