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

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 周期以及为什么动画在第三圈变慢?

最佳答案

首先,关于闪烁:您正在使用 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();

关于javascript - 绘制半径增加的圆弧?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17930961/

10-12 13:33