いつか私のサークルの塗りつぶしを止めることができますか？

Question

どのようにして私のサークルの塗りつぶしを止めることができますか？

円の50％または円の25％を塗りつぶして、左に残してください。ちょうど進行バーのように。

以下のコードはImを使用していますが、丸で塗りつぶしています。 親切に私に提案してください。

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のでにきびを知っているが：ちょうどアニメーションのYの制限を変更。私は0の代わりに100を入れて、サークルの半分を塗りつぶします。

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>