Question

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

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

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

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

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

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

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

1 个答案: