强烈不建议使用canvas动画做网页渲染

先说下什么是canvas动画，该动画可以通过js在网页渲染各种特效，包括全屏特效、局部特效。常见的有，自动跟随鼠标移动的、自动变换的彩带。总之，我不建议你使用任何网页特效。因为这种特效需要用户浏览器消耗大量cpu、gpu去渲染。遇到一些配置不太高的电脑，会显得你的网页很卡，甚至风扇呼呼的响。

Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象的“子级”。

——百度百科

下面举个例子吧:

首先，我们来看站长社区的网站背景上的动画，对cpu和gpu有多大消耗：测试方法，打开对方网站。保持在窗口可见范围内，这样就会消耗cpu跟gpu了。然后打开浏览器中的任务管理器或者系统的任务管理器，看看浏览器占用情况：

而当我关掉这个网页，或者不去看这个网页（切换标签页到其他页面），cpu跟gpu消耗立马下降。

经过我观察每个使用canvas动画的网站发现，无一例外，他们的网站都很消耗用户浏览器的cpu和gpu。

这也就是我不建议使用cavnas动画的原因，如果你不会判断你的网站是否用了canvas动画，可以自己查看下源码是否包含canvas即可。

总之，你只需要记得任何涉及js渲染动画的，一般都是canvas动画。当然，纯css的动画，可以使用的，不影响用户cpu和gpu的占用。

最后，给你几个常见的canvas动画：http://www.bootstrapmb.com/chajian/canvas，强烈不建议使用。