使用canvas绘制环形渐变色进度条

问题背景：

1 实现环形渐变【颜色是均匀的】

2 要有动画进度【时间要可控】

3 弧形边要顺滑【不能有明显的毛刺。产品上线后被提了这个bug :D】

4 要有背景色

代码实现方法：

1 使用canvas画，主要思路是把整个圆弧分隔成n多个小弧线，每个小弧使用不同的颜色描边

2 不同的颜色来自于一条渐变色条，渐变色条取色方式来自于网上搜索，暂时找不到原始地址了，抱歉。其思路是画一条渐变色的色带，根据百分比提取色带上对应的颜色值，然后画到弧线上

3 使用的是canvas的arcTo方法。【arc方法也可以】

4 为了减少毛刺，把canvas宽高增加到原来的N倍(N为正整数，比如2，4，6。1就是默认毛刺很多的值，不推荐。推荐2或者4)。然后用图形变换把整个画布缩小到1/N(使用transform:scale(0.5)或者0.25)

5 动画，使用了requestAnimitionFrame

效果大约是上边的样子。

*如果使用中再发现问题，会逐步修正

代码地址 https://github.com/Ajingjing006/CircleProgress