我怎么能在某个时刻停止填充我的圈子？

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

我知道zit在javascript但是：只需更改动画中的y限制。我把100而不是0，它填满了半圈。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;