使⽤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)
canvas动画5 动画，使⽤了requestAnimitionFrame
效果⼤约是上边的样⼦。
*如果使⽤中再发现问题，会逐步修正

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。