圆弧进度条

已经很久没有写文章了，这次来说说环形进度条吧。

image

如上图所示，与设计稿还原度99%，本来想忽悠设计师用echars的环形图样式，无奈设计师说丑（好像没毛病），没办法只能手撸。

最开始想到的是canvas，然后就哼次哼次搞了起来，然后发现canvas有点问题，就是渲染出来很模糊，这个可以通过放大画布的尺寸来解决，但是呈现出来的效果还是会有点毛边。

所以，我又去看了svg相关的实现，当然也借鉴了网上的部分代码。

先说下好处吧。

1、svg可以在一个区域画一段弧线。

2、svg可以设置笔触弧度，也就是弧线的圆角。

3、svg是矢量图，不会出现模糊的问题。

上代码:

其中，descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];
这段参数可以参考svg画圆弧的参数示例。

https://segmentfault.com/a/1190000004393817

默认svg圆弧的开始位置不是设计稿的位置，所以整体用css3旋转200度就ok了。