首页 > 如何优化这个canvas效果?

如何优化这个canvas效果?

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

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

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

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


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


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


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

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

【热门文章】
【热门文章】