Canvas 帆布进度轮

我正在尝试制作一个与给定模型相匹配的进度轮

到目前为止的进展

我接近了另一个开发人员和一些傻瓜，但不确定如何完成模型。主要通过在较小的圆中完成圆，并根据外部变量确定圆的百分比

我的想法是，我会根据6的倍数做一些数学计算。因此，如果用户是1/6，那么图表是16.6完整的。3/6 50%等等。需要知道我可以在哪里输入

var counter=document.getElementById（'counter'）.getContext（'2d'）；
变量编号=50；//起点
var pointToFill=4.72//从要填充圆的位置开始的点
var cw=计数器.canvas.width//返回画布宽度
var ch=计数器.canvas.height//返回画布高度
var diff；//找出当前值（no）和悲剧值（100）之间的差异
函数fillCounter（）{
差异=（（编号/100）*数学PI*2*10）；
counter.clearRect（0，0，cw，ch）；//每次调用函数时都清除画布
counter.lineWidth=15；//笔划大小
counter.fillStyle='#000'；//要在计数器/圆圈中填充的颜色
counter.strokeStyle='#489DA0'；//笔划颜色
counter.textAlign='center'；
counter.font=“25px monospace”//设置字体大小和字体
counter.lineCap=“圆形”；
counter.fillText（no+'%'，100110）；//fillText（text，x，y）；
counter.beginPath（）；
counter.arc（100,100,90，pointToFill，diff/10+pointToFill）；//弧（x，y，半径，起点，终点）
counter.stroke（）；//填充笔划
//现在添加条件
如果（否>=80）{
clearTimeout（fill）；//fill是调用函数fillcounter（）的变量
否++；
}
}
//现在调用函数
变量填充=设置间隔（填充计数器，100）//每隔50毫秒调用fillCounter函数

---

我想你已经非常接近了，你所需要的只是一个较小的线圈

以下是您的操作方法：

var counter=document.getElementById（'counter'）.getContext（'2d'）；
变量编号=50；//起点
var pointToFill=4.72//从要填充圆的位置开始的点
var cw=计数器.canvas.width//返回画布宽度
var ch=计数器.canvas.height//返回画布高度
var diff；//找出当前值（no）和悲剧值（100）之间的差异
函数fillCounter（）{
差异=（（编号/100）*数学PI*2*10）；
counter.clearRect（0，0，cw，ch）；//每次调用函数时都清除画布
counter.fillStyle='#000'；//要在计数器/圆圈中填充的颜色
counter.strokeStyle='#489DA0'；//笔划颜色
counter.textAlign='center'；
counter.font=“25px monospace”//设置字体大小和字体
counter.lineCap=“圆形”；
counter.fillText（no+'%'，100110）；//fillText（text，x，y）；
counter.beginPath（）；
计数器。线宽=2；
计数器.arc（100,100,90,0，Math.PI*2）
counter.stroke（）；
counter.beginPath（）；
counter.lineWidth=15；//笔划大小
反弧（100、100、90、点到点、差/10+点到点）；
counter.stroke（）；
}
fillCounter（）

---

谢谢。你有没有想法在四周围一个小圆圈？