javascript - 如何优化这个canvas效果?

Question

http://www.alok2333.com/gadgets/canvas/countdown/

这是个倒计时效果，都是用canvas画的。
动画的效果是用setInterval()实现的。

然后我发现打开这个页面后，我转到其它页面，过一段时间再转回来
就会出现很多很多的小球，然后浏览器就要崩溃了。
原代码对小球有一个优化是，当小球弹离开页面时，就把这个小球的数据删去。
之所以会崩溃，
原因我猜想是不打开页面的时候，小球是不会自动运动的，导致越来越多的小球产生。

这个有办法优化吗?该如何优化呢？
求指教求指点！
源码：https://github.com/Aloklok/gadgets/tree/master/canvas/countdown

Answer 1

setInterval会在当前页面非active情况下依旧进行，也就是在切换其他页面或者最小化的时候仍然在后面跑，所以你过段时间切换回来看会发现上面积累了很多东西。

如果从这个方面考虑的话，可以换requestAnimationFrame方式去替换setInterval

Answer 2

试试离屏的canvas（缓存），建立两个canvas标签，大小一致，一个正常显示，一个隐藏（缓存用的，不插入dom中），先将结果draw缓存用的canvas上下文中，因为游离canvas不会造成ui的渲染，所以它不会展现出来，再把缓存的内容整个裁剪再draw到正常显示用的canvas上，这样能优化不少。

Answer 3

这个效果在www.imooc.com有很详细的视频讲解，建议你自己去看看。关于canvas的视频不多