如何重新加载圆形进度条

Question

我对画布以及如何创建圆形进度条进行了一些网络搜索，我得到了这个。我对在网上找到的代码片段进行了一些更改，但我无法再次重新加载循环路径。通过重新加载，我的意思是，当圆圈已满（一个完美的圆圈）时，我想再次绘制它。换句话说，我想在一个完整的旋转完成后再次重复绘制圆圈的过程。当我的变量触发器大于 100 时，我试图清除整个画布，但没有成功。有什么想法吗？

这是代码

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(trigger >= 100){
            ctx.clearRect(0, 0, cw, ch);
        }
        time++;
    }
    var trigger = setInterval(justdoit, 1000);
}

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

函数draw在一个带有onclick="draw()"属性的按钮元素上调用；

Answer 1

我不确定这是否是您所追求的，我已将计时器分开用于圆圈的位置，因此您可以每 100 秒将位置重置为 0 而无需重置时间。

我改变了重要的事情：

添加了一个名为 pos 的新变量。

var pos = 0;

将diff 计算更改为使用pos。

diff = ((pos / 100) * Math.PI*2*10);

将 if 语句更改为每 100 秒将 pos 设置回 0 并清除圆圈。

if(time % 100 == 0){
    pos = 0;
    ctx.clearRect(0, 0, cw, ch);
}

使用time 增加pos。

pos++;

我还减少了示例中的计时器，这样我们就不必等待很长时间才能看到。 - 更改回1000 1 秒间隔setInterval(justdoit, 100);

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var pos = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((pos / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time % 100 == 0){
            pos = 0;
            ctx.clearRect(0, 0, cw, ch);
        }
        time++;
        pos++;
    }
    var trigger = setInterval(justdoit, 100);
}

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>

Answer 2

最后一个'if'块是错误的。改用这个：

if(time >= 100){
    ctx.clearRect(0, 0, cw, ch);
    time = 0;
}

这只会让事情一遍又一遍地重复。希望这是您想要的。

完整的代码在这里（我通过将步骤等待时间从底部第二行的“1000”更改为“10”来加快速度）：

function draw() {
    var c=document.getElementById("prog");
    var ctx=c.getContext("2d");
    var time = 0;
    var start = 4.72;
    var cw = ctx.canvas.width;
    var ch = ctx.canvas.height; 
    var diff;

    function justdoit(){
        
        diff = ((time / 100) * Math.PI*2*10);
        
        ctx.clearRect(0, 0, cw, ch);
        ctx.lineWidth = 10;
        
        ctx.fillStyle = '#09F';
        ctx.strokeStyle = "#09F";
        ctx.textAlign = 'center';
        
        ctx.fillText( time+'s', cw*.5, ch*.5+2, cw);
        ctx.beginPath();
        
        ctx.arc(75, 75, 30, start, diff/10+start, false);
        ctx.stroke();
        
        if(time >= 100){
            ctx.clearRect(0, 0, cw, ch);
            time = 0;
        }
        time++;
    }
    var trigger = setInterval(justdoit, 10);
}

<button onclick="draw()"> draw </button>
<canvas id="prog"></canvas>