射鸡狮说圆形的进度条不是我要的效果

一个没什么特别的日子，你接到了一个没什么特别的设计图，准备写个没什么特别的活动页，而后，看到了一个效果：

“唔，射鸡狮啊，你这个圆是否是没画好啊，缺了个角。”
“这是设计，你懂不懂？你照着设计稿作就完事了，别哔哔。”
“擦，缺个角的圆让我怎么作！？你听我说，CSS只能画圆，并且你这个环的两端仍是圆的……”
“有没有搞错，这点小图都作不出来，要不换个前端来跟我对接吧。”
做为一个有尊严的前端工程师，那确定要证实本身！想一想有没有什么办法吧。唔，那个Canvas是否是能够画画？
做为一个熟练操做ctrl + c和ctrl + v的前端工程师，那就去看看Canvas有没有提供什么API让咱们ctrl + c的吧。

看看Canvas有没有提供咱们想要的东西

官方文档那些文绉绉的东西就不带你们看了，这里分享给你们一个不错的Canvas教程。因为咱们的目的是证实本身，赶忙翻了翻这个教程的目录，立马发现了一个标题《绘制标准圆弧》，这是否是咱们想要的东西呢？
抛开那些什么复杂的圆弧什么曲线，会发现一个API:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中startAngle以及endAngle是起始与结束的位置，它们的单位是弧度，那咱们只要利用好这两位置，就能画出一个不闭合的圆了！直观点的图：

赶忙试试画一个不闭合的圆

codepen看看
GET！这就是咱们想要的样子！这只是成功的第一步，看看跟效果图的差异，咱们还差一个外圈框住这个绿色的圈。

在原来的基础上再画一个外圈框住

codepen看看
这简直就是高保真还原设计图嘛！剩下的事情就简单啦，只须要让这个绿色的圈能动起来就完事了！

动起来吧

这个动画思路仍是比较明确的，无非就是一帧帧地让内圈从一个位置转到另外一个位置直至到达结束的位置：
codepen看看
到此为止，你就证实了本身，找回前端工程师的尊严！走，打射鸡狮去！