平平淡淡的一天，收到一张平平无奇的设计图，准备写一个平平淡淡的活动页面，然后然后，你看到一个效果：“呃，射鸡和狮子，你是不是画圈没画好，少了一个角。”“这是设计，你明白吗？按照设计稿走就完事了，别哔哔。”“擦，缺角的圆怎么画啊！？听我说，CSS只能画圆，你这个圆的两端还是圆的……”“有没有搞错，这张小图不能”做不出来，要不你换个前端跟我连接吧。”作为堂堂正正的前端工程师，一定要证明自己！想想有没有什么办法。嗯，那个Canvas可以画图吗？作为一个熟练操作ctrl+c和ctrl+v的前端工程师，那就去吧看看Canvas有没有提供API让我们用ctrl+c，看看Canvas有没有提供我们想要的，官方文档不会带你去看那些文艺的东西，这里给大家分享一个不错的Canvas教程，既然我们目的是为了证明自己，我们快速的翻了一下教程的内容，立马发现了一个标题《绘制标准圆弧》，这就是我们想要的吗？除了那些复杂的圆弧和曲线，你会发现一个API：context.arc(x,y,radius,startAngle,endAngle,逆时针）,其中startAngle和endAngle分别是起始位置和结束位置，单位是弧度，那么我们只要利用好这两个位置，就可以画出一个空心圆了！直观图：赶紧尝试画一个未闭合的圆codepen看看GET！这个我这就是我们想要的样子！这只是成功的第一步。从效果图上看区别。我们仍然需要一个外圈来框住绿色圆圈。在原图的基础上，画一个外圈框住codepen看看，这简直就是高保真修复设计图！剩下的就简单了，只要让绿圈动起来就大功告成了！让我们继续前进。这部动画的思路比较清晰。无非就是将内圈从一个位置移动到另一个位置，直到到达结束位置：codepen看到你已经证明了自己，重新回到前端。工程师的尊严！走吧，射鸡射狮子！
