该案例来自 -大屏开发

大屏开发中需要实现这个图，并且由于echarts不支持，所以我就自己使用canvas画了。 微信小程序开发时也是遇到了echarts不支持的情况 三年职业生涯一共遇到了两次。我觉得我有必要全面的总结一下，下此使用起来也会更容易。

Echarts底层使用的也是canvas,如何看出来？

看源码，选中图，可以看到使用的元素是canvas.so,底层就是canvas.

canvas需要实现动画，那么怎么实现？

这个就属于JavaScript动画的范畴了，类似于电影的实现，电影也是这样的原理：每秒 24 帧或更多帧足以使其看起来流畅。
image.png
回调函数被插入的那个时间点是performance.now(),就是回调函数被执行的时间。

实现平滑动画最佳的重绘时间间隔是多少？1000ms/60,大约为17毫秒，以这个速度重绘可以实现最平滑的动画，因为这已经是浏览器的极限了。

浏览器执行

主线程
任务队列
任务队列的任务会当主线程没有事情的时候放进去，setInterval和setTimeout只能把任务添加到任务队列，不能确保任务什么时候被执行。

两个问题：
1、浏览器不知道何时Javascript动画开始，最佳的时间间隔问题
2、不知道自己的代码何时实际执行

下边这个requestAnimationFrame就解决了这两个问题。

window.requestAnimationFrame()

因为这个方法我也多了解了几个概念：
后台标签页：指的就是看不到的那些浏览器的标签页了

假设我们有几个同时运行的动画。
如果我们单独运行它们，每个都有自己的 setInterval(..., 20)，那么浏览器必须以比 20ms 更频繁的速度重绘。
每个 setInterval 每 20ms 触发一次，但它们相互独立，因此 20ms 内将有多个独立运行的重绘。
这几个独立的重绘应该组合在一起，以使浏览器更加容易处理。

在我看完高级程序设计这个方法+MDN关于这个方法的介绍后，好像理解了，又好像不知道怎么使用。于是去一个一个理解这里举的例子。

例子理解了，但是不知道咋应用到我的项目中。。。

那么performance.now()是啥？

是啥

进入这个页面的时间。精确到ms。实际上不同浏览器精确的不一样，而且还可以在浏览器的首选项里边设置这个的精度。

那么这个有啥用？

用来统计动画一共执行了多久，用来计算这一次动画跟上一次动画执行的时间的差异。

参考：
1.Javascript 动画-现代JS教程
2.window.requestAnimationFrame()-MDN
3.JavaScript高级程序设计（第四版）-动画与canvas图形
以上三个地方都是权威的内容了，但是我觉得讲的都不清不楚的。反正我没能理解，于是开始写代码实践并且找网上大家自己理解的方式。