Draw a circular circle picture with canvas

The effect is automatically drawn without pausing

The code is as follows

  varCanvas = document.getElementById (' MyCanvas '), width = Canvas.width,height =Canvas.height; varstep,startangle,endangle,add=math.pi*2/100; Counterclockwise =false; varIsdrawover=true; varX1=math.floor (200+100);//Set Default Center x axis         varY1=math.floor (20+100);//Set the default center Y axis         varXvary; varradius1= Math.floor (10+50);//Set the default circle radius         varradius; varAnimation_interval = 20,n = 100; varVarName; functionSetctxcanvas () {CTX= Canvas.getcontext (' 2d '); Ctx.shadowoffsetx= 0;//Set Horizontal Displacementctx.shadowoffsety = 0;//Set Vertical DisplacementCtx.shadowblur = 10;//setting the degree of ambiguityCtx.linewidth = 1.0; }         functionActiondo () {if(isdrawover) {Isdrawover=false;                 Setctxcanvas (); Step=1; StartAngle=0; Ctx.strokestyle= ' # ' + (' 00000 ' + (Math.random () *0x1000000<<0). ToString ()). Slice (-6);//Circle ColorCtx.shadowcolor = ' # ' + (' 00000 ' + (Math.random () *0x1000000<<0). ToString (+)). Slice (-6);//Set Shadow color                 //Center Position                 if(x==undefined&&y==undefined&&radius==undefined) {x=X1; Y=Y1; Radius=Radius1; }                 Else if(x1==x&&y1==y&&radius1==radius) {x=X1; Y=y1-Radius1; Radius= RADIUS1/2;                 }                 Else if(x==x1&&y<y1) {x=x1+Radius1; Y=Y1; Radius= RADIUS1/2;                 }                 Else if(y==y1&&x>x1) {x=X1; Y=y1+Radius1; Radius= RADIUS1/2;                 }                 Else if(x==x1&&y>y1) {x=x1-Radius1; Y=Y1; Radius= RADIUS1/2;                 }                 Else if(x<x1&&y==y1) {x=X1; Y=Y1; Radius=Radius1; }                //var htmldiv= ' <div>x= ' +x+ ', y= ' +y+ ', radius= ' +radius+ ', x1= ' +x1+ ', y1= ' +y1+ ', radius1= ' +radius1+ ' </div > ';              //$ (' #ddd '). Append (Htmldiv); Varname=setinterval (animation, animation_interval); }         } varAnimation =function () {       if(Step <=N) {endangle= StartAngle +add;                  DrawArc (StartAngle, Endangle); StartAngle=Endangle; Step++; } Else{clearinterval (varName); Isdrawover=true;     Actiondo (); }            }; functionDrawArc (S, e) {Ctx.beginpath ();           Ctx.arc (x, y, radius, S, e, counterclockwise); Ctx.linewidth= 1.0;   Ctx.stroke (); }  

The code runs directly as follows

<canvas id= "MyCanvas" width= "" "height=" "style=" border:0px solid #333; ></canvas>

The HTML code is all right.

Draw a circular circle picture with canvas