canvas绘制环形进度条

hellow,现在是北京时间午夜0.10分，一起修仙啊，，，我是前端钻石（黑铁）段位的 于文乐
最近工作中遇到canvas，要求是画一个环形的进度条，以往遇到canvas这种东西都是绕开，但这次好像逃不掉了，就自己写了个demo（虽然项目里的进度条颜色还是有问题）但这并不影响我写这个demo,刚开始写的时候看到这个一个个配置项乱起八遭的也是头疼。但耐下心去一个一个看还是可以写出来的，好了不多说废话了。。。。?。
這是demo的效果图
下面是代码

这部分是画底部灰色圆环的 不许要动态画出来所以较为简单，其实都挺简单关键是去记住每一个配置项 首先需要获取canvas标签然后创建画布context对象 canva画圆环是用arc方法去画的 里面每一个配置项 图里也有就不多说了 ，要说的是xy坐标轴永远在画布的左上角，以及起始角是由0π 0.5π 1.5π 2π的角度 分别对应顺时针。
这部分是动态的圆环最要注意的地方

要注意的是想要动态画出来肯定是用到定时器 每隔一毫秒画一段视觉上就会有连贯性的动画效果，第一个箭头指定配置项beginpath是不可缺少的创建了绘图路径，第二个箭头指的是定时器部分1.5只是暂时写死的值由于时间问题（困了）就不封装函数了，这个值就是 对应值/总量的值*2 第三个箭头的是填充路径的同样也是动态画不可缺少的属性。 看看时间都1.05了睡了睡了 ，写这些东西也是给自己加深一下印象，随便发发。大佬们不要嘲讽我。哈哈溜了溜了。