Javascript 如何在径向进度条上显示区段？

我现在有一个径向进度条，像一个“实心”边框，我想有一个带部分的径向进度条（像一个“虚线”边框，但有更多的控制）

我要找的是：

以下是我到目前为止的情况：

var el=document.getElementById（'graph'）；//获取画布
变量选项={
百分比：el.getAttribute（'data-percent'），
大小：el.getAttribute（'data-size'），
线宽：el.getAttribute（'data-line'），
轮换：0
}
var canvas=document.createElement（'canvas'）；
var span=document.createElement（'span'）；
span.textContent=options.percent+'%'；
if（typeof（G_vmlcavasmanager）！=‘未定义’）{
G_vmlcavasmanager.initElement（画布）；
}
var ctx=canvas.getContext（'2d'）；
canvas.width=canvas.height=options.size；
el.appendChild（span）；
el.儿童（帆布）；
ctx.translate（options.size/2，options.size/2）；//换乘中心
ctx.rotate（-1/2+options.rotate/180）*Math.PI）；//旋转-90度
变量半径=（options.size-options.lineWidth）/2；
var drawCircle=函数（颜色、线宽、百分比）{
百分比=数学最小值（数学最大值（0，百分比| 1），1）；
ctx.beginPath（）；
ctx.弧（0，0，半径，0，Math.PI*2*百分比，假）；
ctx.strokeStyle=颜色；
ctx.lineCap='round'；//对接、圆形或方形
ctx.lineWidth=线宽
ctx.stroke（）；
};
画圈（'#57d39d'，options.lineWidth，100/100）；
画圈（'14928e'，options.lineWidth，options.percent/100）
div{
位置：相对位置；
利润率：30像素；
宽度：110px；
高度：110px；
}
帆布{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
跨度{
颜色：黑色；
显示：块；
线高：110px；
文本对齐：居中；
宽度：110px；
字体系列：无衬线；
字体大小：粗体；
字体大小：30px；
左边距：5px；
}
灵感来自钢笔：

和下面的纯HTML/CSS代码片段


.boo{
文本对齐：左对齐；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-35px；
宽度：70px；
高度：70像素；
背景：石灰；
z指数：-1；
边界半径：100%；
}
.boo:n个孩子（1）{
变换：旋转（-71度）平移（70像素）；
}
.boo:n个孩子（2）{
变换：旋转（1deg）平移（70px）；
}
.boo:n个孩子（3）{
变换：旋转（73度）平移（70像素）；
}
.boo:n个孩子（4）{
变换：旋转（145度）平移（70像素）；
}
.boo:n个孩子（5）{
变换：旋转（217deg）平移（70px）；
}
.a1.boo+.boo{
背景：灰色；
}
.a2.boo:n个孩子（2）~.boo{
背景：灰色；
}
.a3.boo:n个孩子（3）~.boo{
背景：灰色；
}
.a4.boo:n个孩子（4）~.boo{
背景：灰色；
}
.a1:之后{
内容：“1/5”；
}
.a2：之后{
内容：“2/5”；
}
.a3：之后{
内容：“3/5”；
}
.a4：之后{
内容：“4/5”；
}
.a5：之后{
内容：“5/5”；
}
格格先生{
浮动：左；
字体大小：50px；
位置：相对位置；
宽度：150px；
边界半径：100%；
文本对齐：居中；
利润率：20px 10px；
填充：15px；
溢出：隐藏；
}
.gge:以前{
内容：''；
显示：内联块；
填充：50%0；
左边距：-0.25em；
垂直对齐：中间对齐；
z指数：2；
}
G.之后{
线高：150px；
位置：绝对位置；
z指数：1；
背景：白色；
边界半径：100%；
左：15px；
顶部：15px；
右：15px；
底部：15px；
}
布：以前，
布：之后{
左：自动；
内容：''；
位置：绝对位置；
高度：20px；
宽度：16px；
背景：继承；
边界半径：8px；
变换：旋转（-35度）；
}
布：以前{
顶部：-7px；
右：21px；
}
布：之后{
变换：旋转（30度）；
底部：-7px；
右：21px；
左：自动；
}
你可以直接使用破折号图案。只需根据圆的周长计算破折号图案：

假设变量已声明：

radius=140；
圆周=2*Math.PI*半径；
差距=7；
截面=5；
dashOn=圆周/截面-间隙；

然后按以下方式设置破折号图案：

ctx.setLineDash（[dashOn，gap]）；//设置短跑模式
ctx.lineDashOffset=-gap*0.5；//中央仪表板间隙

我想让第一个间隙/截面向上，你只需要先将上下文旋转-90°

更新：如果您想为每个分段设置圆角，只需执行以下操作即可激活：

ctx.lineCap = "round";

但是，“cap”将消耗部分间隙，因此我们需要通过将线宽添加到间隙值来补偿间隙的大小

例子
显示如何设置和删除破折号图案，并演示如何旋转上下文，以便从顶部位置绘制剖面，以及如何制作圆角封口


var ctx=c.getContext（“2d”），
半径=140，
圆周=2*Math.PI*半径，
线宽=12，
间距=9+线宽；//补偿圆顶
函数render（）{
var截面=s.max=+分段值；
var dashOn=圆周/截面-间隙；
var t=+s.value/sections；//规范化节上的值
clearRect（0，0，300，300）；//清除以前绘制的内容
setTransform（1,0,0,1150）；//平移到中心
ctx.rotate（-Math.PI*0.5）；//旋转-90°，因此0°向上
ctx.beginPath（）；
ctx.arc（0,0，半径，Math.PI*2*t，Math.PI*2）；//从x角度开始的圆
ctx.setLineDash（[dashOn，gap]）；//设置破折号模式
ctx.lineDashOffset=-gap*0.5；//中间划线间距
ctx.lineWidth=lineWidth；//线宽
ctx.lineCap=“round”；//线宽
ctx.strokeStyle=“#9ac”//基色
ctx.stroke（）；//渲染它
ctx.beginPath（）；
ctx.arc（0，0，半径，0，Math.PI*2*t）；//基于角度xt渲染圆弧
ctx.strokeStyle=“#06c”//顶色
ctx.stroke（）；
ctx