Verhalten wie fillRect mit Bogen

Question

Ich möchte das gleiche Verhalten wie seen here für ein Rechteck für einen Kreis haben. Also möchte ich zum Beispiel einen halben Kreis zeichnen und den zwischen den beiden Linien eingekapselten Bereich dynamisch füllen.

Es könnte wie folgt aussehen waren die grüne Farbe dynamisch basierend auf einigen Aktionen gefüllt werden soll:

So würde ich das einstellen zu können, wie nur die Hälfte der Höhe dieses halfcirlce ist gefüllt mit Farbe, dann 70% etc ... wie eine Fortschrittsleiste zum Beispiel.

Ich habe versucht, es wie folgt aus:

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(); 

Aber damit das ganze Halbkreis gefüllt ist, und nicht nur der Bereich zwischen den Linien.

Wie könnte ich das tun?

Answer 1

Sie müssen den richtigen anticlockwise Flag an die arc() Funktion liefern:

// Draw arc segment with given inner and outer radius and start and end angle: 
 
function drawArc(ctx, x, y, inner, outer, start, end) { 
 
    if (start > end) [end, start] = [start, end]; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(x, y, outer, start, end, false); 
 
    if (end < start + 2 * Math.PI) { 
 
    ctx.lineTo(x + Math.cos(end) * inner, y + Math.sin(end) * inner); 
 
    } else { 
 
    ctx.moveTo(x + Math.cos(end) * inner, y + Math.sin(end) * inner); 
 
    } 
 
    ctx.arc(x, y, inner, end, start, true); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 

 
// Example: 
 
let canvas = document.getElementById("canvas"); 
 
let ctx = canvas.getContext("2d"); 
 

 
function frame(time) { 
 
    ctx.fillStyle = "red"; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    drawArc(ctx, canvas.width/2, canvas.height/2, 40, 60, 0, time * 0.001); 
 
    requestAnimationFrame(frame); 
 
} 
 
requestAnimationFrame(frame);

<canvas id="canvas"></canvas>