javascript - 绘制半径增加的圆弧？

Question

我正在绘制一个逐渐增加并变成圆的圆弧。动画完成后(圆弧变成圆)我想绘制另一个半径增加的圆，前一个圆保持不变，第二个动画继续。

Arc to circle fiddle

画完圆后，它被冲掉了，这是我不想要的，继续第二个动画。完成后出现一些不必要的动画。

我该怎么办？

我的代码:

    setInterval(function(){
        context.save();
        context.clearRect(0,0,500,400);
        context.beginPath();
        increase_end_angle=increase_end_angle+11/500;
        dynamic_end_angle=end_angle+increase_end_angle;
        context.arc(x,y,radius,start_angle,dynamic_end_angle,false);
        context.lineWidth=6;
        context.lineCap = "round";
        context.stroke();
        context.restore();
           if(dynamic_end_angle>3.5*Math.PI){  //condition for if circle completion
                draw(radius+10);//draw from same origin and increasd radius
           }
    },66);

window.onload=draw(30);

更新:我什么时候应该清除间隔以节省一些 cpu 周期，为什么动画在第三圈变慢？？

Answer 1

首先，关于闪烁:您正在使用 setInterval 而不是为下一个 draw() 清除它。就是这样。

但我会使用 completely different approach ;只需检查自开始以来耗时，并使用循环绘制适当数量的圆圈。

var start = new Date().getTime();

var timePerCircle = 2;
var x = 190, y = 140;

function draw() {
    requestAnimationFrame(draw);
    g.clearRect(0, 0, canvas.width, canvas.height);

    var t = (new Date().getTime() - start) / 1000;
    var circles = t / timePerCircle;
    var r = 30;

    do {
        g.beginPath();
        g.arc(x, y, r, 0, Math.PI * 2 * Math.min(circles, 1));
        g.stroke();
        r += 10;
        circles--;
    } while(circles > 0);
}

draw();