Как я могу прекратить заполнять свой круг в какой-то момент?

Question

Как я могу прекратить заполнять свой круг в какой-то момент?

Как только заполните 50% круга или 25% круга и оставьте поле слева. Также как индикатор выполнения.

ниже - код, который я использую, но заполняет весь круг. Пожалуйста, дайте мне советы.

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

Я знаю, что прыщ на Javascript, но: Просто измените предел у в неживой. Я ставил 100 вместо 0, и он заполняет половину круга.

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>