Javascript 类似于带圆弧的fillRect的行为

我想有同样的行为，可以为一个矩形的圆。 所以我想画一个半圆形，我想动态地填充两条线之间的区域

看起来可能是这样的，绿色应该根据一些操作动态填充：

所以我想能够设置这个半圆形的高度只有一半是用颜色填充的，然后是70%等等。。。比如progressbar

我这样试过：

    ctx.beginPath();

    ctx.arc(centerCoordinate.x, centerCoordinate.y, circleRadius, 0, Math.PI, false);

    var cirlceEndpoint = getCircleEndPoint(centerCoordinate, Math.PI);
    ctx.lineTo(cirlceEndpoint[0] + 20, cirlceEndpoint[1]);
    ctx.moveTo(centerCoordinate.x + circleRadius, centerCoordinate.y);

    ctx.arc(centerCoordinate.x, centerCoordinate.y, circleRadius - 20, 0, Math.PI, false);
    ctx.moveTo(centerCoordinate.x + circleRadius, centerCoordinate.y);
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();

    ctx.stroke();

但是用这个填充整个半圆，而不仅仅是线之间的区域

---

如何执行此操作？

您需要为函数提供正确的逆时针

标志：


//用给定的内外半径和起始角和结束角绘制圆弧段：
功能drawArc（ctx、x、y、内部、外部、开始、结束）{
如果（开始>结束）[结束，开始]=[开始，结束]；
ctx.beginPath（）；
ctx.弧（x，y，外部，开始，结束，假）；
如果（结束<开始+2*Math.PI）{
ctx.lineTo（x+数学cos（end）*内部，y+数学sin（end）*内部）；
}否则{
ctx.moveTo（x+Math.cos（end）*内部，y+Math.sin（end）*内部）；
}
弧（x，y，内部，结束，开始，真）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
}
//例如：
让canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
功能帧（时间）{
ctx.fillStyle=“红色”；
clearRect（0，0，canvas.width，canvas.height）；
drawArc（ctx，canvas.width/2，canvas.height/2，40，60，0，time*0.001）；
请求动画帧（帧）；
}
请求动画帧（帧）