使用canvas、SVG、css+js实现环形进度条

1、css+js
思路：
1、将环形的圆看成两个半圆；
2、0-50的时候，视觉上是右半圆开始展示进度条，但是在实现上是左半圆开始以右顺时针旋转；
3、50-100的时候，视觉上是左半圆开始展示进度条，但是实现上是右半圆开始向左旋转
4、开始时，右半圆肯定是不显示的，只有在50-100时才显示出来
5、开始时，左半圆肯定要展示的，不然旋转也看不出效果，但是这样左边的旋转就能看出来，所以要一个遮罩将左边遮挡住
代码如下：

效果展示：（gif出来的有点停顿，真实的还是挺流畅的，哈哈）

IMG_0751.GIF

2. svg
   使用svg来绘制这种二维图形真的很方便；
   思路很简单：使用svg的circle，然后动态修改circle的stroke-dashoffset；进度条就看成circle的stroke；
   代码如下：

    
        
        
        
    
    
        svg
        
        
        
    

展示效果和上面css+js完成的基本一样，就不再去弄gif了，偷个懒

3.canvas
canvas画图很方便啦，直接上代码

    
        
        
        
    
    
        svg
        
        
        
    

其实这个是很多动图的原型，比如长按录音时外围的进度条，比如时钟等等的基础都是这个，理解了这个原理很多东西做起来都很顺手了。