javascript - 如何在某个时候停止填充我的圈子？

如何在某个时候停止填充我的圈子？

像只填满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>

最佳答案

我在JavaScript上知道zit，但：只需更改animate的动画值即可。我把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>

关于javascript - 如何在某个时候停止填充我的圈子？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38370494/