环形进度条没有想象的那么简单

最终效果如下图：

做动画除了使用 CSS 中的 animation，还可以使用 JS 来实现。使用 CSS 实现环形进度条并没有一个比较好的方案，可以通过 svg 或 canvas 来实现，今天通过 canvas 来实现，它的好处就是可以同时应用到小程序和网页中。

环形进度动画实现的核心就是一点一点来画一个园，这样会给人产生一个假象，进度条不断前进。

网页中可以直接使用 canvas 标签来定义一块画布，小程序则需要通过 createCanvasContext 这个 API 来创建画布。

创建好画布之后需要通过 JS 来画一个圆，我定义了一个函数 drawCircle，有 2 个参数，n为画的角度，总共为 360 度，width 为进度条的宽度。

在画圆的过程中发现会有锯齿，看着不是很光滑，通过查看 chart.js 的源码发现，在 retina 屏上，由于一个点要显示 3 个像素，而我们画的时候在 1 个点上画了 1 个像素，导致有锯齿。可以这样解决：

可以调用函数 drawCircle （drawCircle(360, 4);）来「一次性」画一个圆，期间不会看到进度条的变化：

如果想让进度条动起来，那就一点一点画这个圆。

这里有个比较 hack 的地方，通过一点一点画出来的圆，看起来有「一点点」锯齿，为更光滑一些，当一个进度条到了 100% 的时候，我把原先画的圆清除再画一个一模一样的圆。

到此一个进度条就实现了，但是这个只是提供了实现思路，在实际情况中可以写成一个通用的组件。比如有赞已经实现的小程序组件：

https://github.com/youzan/vant-weapp/blob/dev/dist/circle/index.js

大家加油！

---

推荐阅读：

[1].https://github.com/chartjs/Chart.js/blob/cfb5fba527cd93b596329fb05079e320b6586701/src/helpers/helpers.dom.js

学习前端的 7 个专题