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