Wie kann ich irgendwann aufhören, meinen Kreis zu füllen?

Question

Wie kann ich irgendwann aufhören, meinen Kreis zu füllen?

Füllen Sie nur 50% des Kreises oder 25% des Kreises und lassen Sie den Rest übrig. Genau wie Fortschrittsbalken.

unten ist der Code Im verwenden, aber es füllt den gesamten Kreis. Bitte geben Sie mir bitte Vorschläge.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 
ctx.lineCap = "round"; 
 

 
var y = ch - 10; 
 
var drawingColor = "#0092f9"; 
 
animate(); 
 

 
function animate() { 
 

 
    if (y > 0) { 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.save(); 
 
    drawContainer(0, null, null); 
 
    drawContainer(15, drawingColor, null); 
 
    drawContainer(7, "white", "white"); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    drawLiquid(); 
 
    ctx.restore(); 
 
    ctx.restore(); 
 

 
    y--; 
 

 
} 
 

 
function drawLiquid() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, y); 
 
    for (var x = 0; x < 300; x += 1) { 
 
     ctx.quadraticCurveTo(x + 5, y+5, x + 5, y); 
 
    } 
 
    ctx.lineTo(cw, ch); 
 
    ctx.lineTo(0, ch); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = drawingColor; 
 
    ctx.fill(); 
 
} 
 

 
function drawContainer(linewidth, strokestyle, fillstyle) { 
 
    ctx.beginPath(); 
 
    
 
ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI); 
 
    ctx.lineWidth = linewidth; 
 
    ctx.strokeStyle = strokestyle; 
 
    ctx.stroke(); 
 
    if (fillstyle) { 
 
     ctx.fillStyle = fillstyle; 
 
     ctx.fill(); 
 
    } 
 
}

<canvas id="canvas" width=200 height=200></canvas>

Answer 1

Ich weiß, zit bei JavaScript, aber: Gerade die Grenze von y in belebten ändern. Ich gebe 100 statt 0 und es füllt den halben Kreis.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 
ctx.lineCap = "round"; 
 

 
var y = ch - 10; 
 
var drawingColor = "#0092f9"; 
 
animate(); 
 

 
function animate() { 
 

 
    if (y > 100) { 
 
     requestAnimationFrame(animate); 
 
    } 
 

 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.save(); 
 
    drawContainer(0, null, null); 
 
    drawContainer(15, drawingColor, null); 
 
    drawContainer(7, "white", "white"); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    drawLiquid(); 
 
    ctx.restore(); 
 
    ctx.restore(); 
 

 
    y--; 
 

 
} 
 

 
function drawLiquid() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, y); 
 
    for (var x = 0; x < 300; x += 1) { 
 
     ctx.quadraticCurveTo(x + 5, y+5, x + 5, y); 
 
    } 
 
    ctx.lineTo(cw, ch); 
 
    ctx.lineTo(0, ch); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = drawingColor; 
 
    ctx.fill(); 
 
} 
 

 
function drawContainer(linewidth, strokestyle, fillstyle) { 
 
    ctx.beginPath(); 
 
    
 
ctx.arc(cw/2, ch/2,cw/2-30,0,2*Math.PI); 
 
    ctx.lineWidth = linewidth; 
 
    ctx.strokeStyle = strokestyle; 
 
    ctx.stroke(); 
 
    if (fillstyle) { 
 
     ctx.fillStyle = fillstyle; 
 
     ctx.fill(); 
 
    } 
 
}

<canvas id="canvas" width=200 height=200></canvas>