在画布中绘制多条弧线的 JQuery 动画问题答案

【问题标题】：JQuery Animation Issue on Drawing Multiple Arcs in Canvas在画布中绘制多条弧线的 JQuery 动画问题
【发布时间】：2015-04-16 14:11:45
【问题描述】：

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

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

【问题讨论】：

看起来你的两条弧线相互重叠，如果你改变任何一条的半径，就会出现2。你想在另一条结束之后开始一个弧吗？
@Phoenix 是的，这就是我想要的动画。一张又一张的画弧线。如果需要，请提供解决方案。

标签： javascript jquery html css

【解决方案1】：

这是你的小提琴的更新版本：

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

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

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

【讨论】：