javascript - 在 Canvas 中绘制多个圆弧的 JQuery 动画问题

Question

我正在尝试创建一个时钟应用程序。我想在 Canvas 上启动动画并绘制弧线，但它只绘制了我制作的两条弧线之一。如何确保在动画期间绘制两条弧线？我想要一个接一个地绘制标记。

JSFiddle

HTML

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

CSS

body
{
    background: #1A4978;
}

JS/JQuery

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

Answer 1

这是您的 fiddle 的更新版本:

https://jsfiddle.net/uawc8pu7/3/

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

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