Javascript 如何重新加载循环进度条

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

这是密码

函数绘图（）{
var c=document.getElementById（“prog”）；
var ctx=c.getContext（“2d”）；
var时间=0；
var start=4.72；
var cw=ctx.canvas.width；
var ch=ctx.canvas.height；
var-diff；
函数justdoit（）{
差异=（（时间/100）*数学PI*2*10）；
ctx.clearRect（0，0，cw，ch）；
ctx.线宽=10；
ctx.fillStyle='#09F'；
ctx.strokeStyle=“#09F”；
ctx.textAlign='中心'；
ctx.fillText（时间+'s'，cw*.5，ch*.5+2，cw）；
ctx.beginPath（）；
ctx.arc（75,75,30，启动，差异/10+启动，错误）；
ctx.stroke（）；
如果（触发器>=100）{
ctx.clearRect（0，0，cw，ch）；
}
时间++；
}
var触发器=设置间隔（justdoit，1000）；
}

draw

最后一个“if”块错误。改用这个：

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

这只会让事情一次又一次地重复。希望这就是你想要的

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

函数绘图（）{
var c=document.getElementById（“prog”）；
var ctx=c.getContext（“2d”）；
var时间=0；
var start=4.72；
var cw=ctx.canvas.width；
var ch=ctx.canvas.height；
var-diff；
函数justdoit（）{
差异=（（时间/100）*数学PI*2*10）；
ctx.clearRect（0，0，cw，ch）；
ctx.线宽=10；
ctx.fillStyle='#09F'；
ctx.strokeStyle=“#09F”；
ctx.textAlign='中心'；
ctx.fillText（时间+'s'，cw*.5，ch*.5+2，cw）；
ctx.beginPath（）；
ctx.arc（75,75,30，启动，差异/10+启动，错误）；
ctx.stroke（）；
如果（时间>=100）{
ctx.clearRect（0，0，cw，ch）；
时间=0；
}
时间++；
}
var触发器=设置间隔（justdoit，10）；
}

draw

我不确定这是否是您想要的，我已将圆圈位置的计时器分离出来，以便您可以每100秒将位置重置为0，而无需重置时间

我已经改变了重要的事情：

添加了一个名为

pos

的新变量

var pos = 0;

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

将

diff

计算更改为使用

pos

var pos = 0;

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

将if语句更改为每100秒将

pos

设置回0，并清除圆圈

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

用

时间增加
pos

pos++;

此外，我还减少了示例中的计时器，因此我们不必等待很长时间才能看到。-更改回
1000
，间隔1秒
setInterval（justdoit，100）


函数绘图（）{
var c=document.getElementById（“prog”）；
var ctx=c.getContext（“2d”）；
var时间=0；
var-pos=0；
var start=4.72；
var cw=ctx.canvas.width；
var ch=ctx.canvas.height；
var-diff；
函数justdoit（）{
差异=（（位置/100）*数学PI*2*10）；
ctx.clearRect（0，0，cw，ch）；
ctx.线宽=10；
ctx.fillStyle='#09F'；
ctx.strokeStyle=“#09F”；
ctx.textAlign='中心'；
ctx.fillText（时间+'s'，cw*.5，ch*.5+2，cw）；
ctx.beginPath（）；
ctx.arc（75,75,30，启动，差异/10+启动，错误）；
ctx.stroke（）；
如果（时间%100==0）{
pos=0；
ctx.clearRect（0，0，cw，ch）；
}
时间++；
pos++；
}
var触发器=设置间隔（justdoit，100）；
}
draw
知道了，我现在唯一要做的就是保持时间不变。谢谢：）你比我领先一步！这正是我需要的，保持时间不变。非常感谢你