Javascript 绘制更多弧形画布

大家好我想知道如何在画布中画更多的弧线，我需要什么来画这个圆：

因此，我编写了此响应性代码，以使画布具有响应性：

var myCanvas=document.getElementById（'myCanvas'）；
var ctx=myCanvas.getContext（'2d'）；
var centerX=myCanvas.width/2；
var centerY=myCanvas.height/2；
var borderWidth=20；
var borderColor='#2DC36A'；
变量半径=（myCanvas.width/2）-（borderWidth/2）；
//天弧画布背景
ctx.beginPath（）；
ctx.弧（中心x，中心y，半径，0，2*Math.PI，假）；
ctx.lineWidth=边框宽度；
ctx.strokeStyle=边框颜色；
ctx.stroke（）；
ctx.closePath（）；
//使画布具有响应性
函数makeResponsive（）{
var containerWidth=$（'.progress'）.width（）；
$（'.progress'）。高度（集装箱宽度）；
var canvasElements=['#myCanvas']；
$（'#myCanvas'）。宽度（containerWidth）。高度（containerWidth）；
}
makeResponsive（）；//使画布在文档中具有响应性
$（窗口）。调整大小（函数（）{
makeResponsive（）；//在窗口调整大小时使画布响应
});
#进度{
宽度：100%；
填充物：5px；
}
.进展情况{
位置：相对位置；
边界半径：50%；
}
帆布{
显示：块；
位置：绝对位置；
}

通过使用svg并使用jquery设置“stroke dasharray”的样式，您可能会发现这更容易：通过使用svg并使用jquery设置“stroke dasharray”的样式，您可能会发现这更容易：