canvas实现环形计时器

1gif.gif

之前项目中有做过一款环形计时器，当时是纯用css3实现的，动画效果不错，但有一个非常致命的缺点：通用性差。如果遇到需要统计不同时长的情况下，就必须根据不同的时长再额外写。
现在我换用js和canvas将环形计时器封装成组件，我们调用这个组件时，只需要传一些配置属性，就可以根据不同需求来展示，具体配置如下：

let props={
width:100, //cavas画布宽度
height:100, //画布高度
radius:20, //计时器的半径
time:10*1000, //需要倒计的时长
ringColor:'#999', //进度条的颜色
defaultColor:'#333' , //默认底色
lineWidth: 5 //进度条的宽度
}

基于这个计时器我还写了另一个组件，类似于音乐播放器的效果，可以手动开始／暂停,配置信息基本是一致的：

2gif.gif

[demo展示中心］：https://yomonah.github.io/project/app.html#/circle-timer
[源码]：https://github.com/yomonah/react-demo/tree/master/src/components/circle_timer