一个没什么迥殊的日子，你接到了一个没什么迥殊的设想图，预备写个没什么迥殊的运动页，然后，看到了一个结果：

“唔，射鸡狮啊，你这个圆是否是没画好啊，缺了个角。”
“这是设想，你懂不懂？你照着设想稿做就完事了，别哔哔。”
“擦，缺个角的圆让我怎么做！？你听我说，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看看
到此为止，你就证实了本身，找回前端工程师的庄严！走，打射鸡狮去！