写了一个画圆的动画，想在执行画完大圆后画小圆，但运行后只画小圆

Question

var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d');

var step,startAngle,endAngle,add=Math.PI*2/100;
ctx.shadowOffsetX = 0; // 设置水平位移
ctx.shadowOffsetY = 0; // 设置垂直位移
ctx.shadowBlur = 10; // 设置模糊度
ctx.lineWidth = 1.0;
counterClockwise = false;
var x;
var y;
var radius;
var animation_interval = 20,n = 100;
var varName;

function drawCircle(X,Y,Radius){
step=1;
startAngle=0;
ctx.strokeStyle ='#FFF';//圆圈颜色

ctx.shadowColor = '#000'; // 设置阴影颜色
//圆心位置
x=X;
y=Y;
radius = Radius;

varName= setInterval(animation, animation_interval);

     }

function actiondo(){
var draw=function(){drawCircle(400,500,80);};
draw();
draw=function(){drawCircle(400,500,50);};
draw();
}

var animation = function () {

if (step <= n) {

endAngle = startAngle + add ;

drawArc(startAngle, endAngle);
startAngle = endAngle;
step++;

} else {

clearInterval(varName);

}

};
function drawArc(s, e) {

ctx.beginPath();

ctx.arc(x, y, radius, s, e, counterClockwise);

ctx.lineWidth = 1.0;

ctx.stroke();

}

Answer 1

画完大圆没有看到有停顿刷新的代码就画小圆，所以看不见了。