Javascript 在画布中绘制多个圆弧的JQuery动画问题

我正在尝试创建一个时钟应用程序。我想在开始时在画布上设置动画并绘制圆弧，但它只绘制了我绘制的两个圆弧中的一个。如何确保在动画期间绘制两个圆弧？我要画一个又一个的记号

HTML

JS/JQuery

---

以下是您的小提琴的更新版本：

---

我添加了一个检查，以查看startAnimationDone变量何时更改为true，此时代码将为另一个圆弧启动新动画。代码也可以稍微清理一下：

看起来两条弧彼此重叠，如果更改任何一条弧的半径，将显示两条弧。你想在另一端之后开始一个弧吗？@Phoenix是的，这就是我想要的动画。一个接一个的弧线图。如果需要，请提供解决方案。

<canvas id="clock" width="1000" height="500"></canvas>

body
{
    background: #1A4978;
}

var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
var x = canvas.width/4;
var y = canvas.height/2;
var radius = 150;
var startAngle = 0;
var endAngle = 2*Math.PI;

var startAnimationDone = false;

if (startAnimationDone == true)
{
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDay();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
}

function update(start, end)
{
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.beginPath();
    context.strokeStyle = "#FF7519"; 

    context.arc(x , y, radius, start, end);
    context.lineWidth = 10; 
    context.stroke();
    context.closePath();

    context.beginPath();
    context.strokeStyle = "#FFA319";
    radius = 160;

    context.arc(x , y, radius, start, end);
    context.lineWidth = 10; 
    context.stroke();
    context.closePath();
}

$(document).ready(function() 
{
    var time = 0;
    var count = 0;
    function startAnimation() 
    {
        if (count <= 2)
        {
            time += 0.02;
            update(0, time*Math.PI);
            count += 0.02;
        }
    }
    setInterval(startAnimation, 10);
    startAnimationDone = true;
});

else if (!startAnimationDone) {
  clearInterval(intervalID);
  startAnimationDone = true;
}