The two "circles" of JS drawing geometry

The point P (x, y) on the circle with radius r is related to the center O (x0,y0): x = X0+rcosa; y = Y0+rsina, A is radians

Example: http://www.zhaojz.com.cn/demo/draw6.html

First, round

//Round/Oval//Dot Polka Dot//R radius//Compressionratio Vertical Compression ratiofunctiondrawcircle (dot, R, compressionratio, data) {varPstart = [Dot[0]+r, dot[1]];//starting point    varPre =Pstart;  for(vari=0; I < 360; I+=5) {rad= i*math.pi/180; Calculate radians//R*math.cos (RAD) Arc's end point relative to Dot's horizontal offset        //Vertical offset of r*math.sin (RAD) arc relative to Dot        //Compressionratio Vertical Compression ratio        varcur = [R*math.cos (RAD) +dot[0], Compressionratio*r*math.sin (RAD) +dot[1]];        DrawLine (pre,cur); Pre= cur;//Save the coordinates of the current point} drawLine (Pre,pstart);//make closed    //Stroke DotsDrawpoint ({pw:2,ph:2,color: ' darkred ', Point:dot});}

Second, ARC

Just as part of the circle, the algorithm is similar to the circle

//Arc Drawing//Dot Polka Dot//R radius//Angle Central Angle//angle between Angleofslope and x-axis//whether pop pops up//Title TagfunctionDrawArc (dot, R, Angle, Angleofslope, pop, title) {varNewDot = [Dot[0], dot[1]]; varA = (ANGLEOFSLOPE+ANGLE/2) *math.pi/180; if(POP) {//calculates the new coordinates of the center PointNewdot[0] = dot[0]+10*Math.Cos (a); newdot[1] = dot[1]+10*Math.sin (a); }        if(!angleofslope) {Angleofslope= 0; }    varAOS = angleofslope*math.pi/180;varAos2 = (angleofslope+angle) *math.pi/180;varPstart = [Newdot[0]+r*math.cos (AOS), Newdot[1]+r*math.sin (AOS)];//the beginning of the arc    varPend = [Newdot[0]+r*math.cos (Aos2), Newdot[1]+r*math.sin (Aos2)];//the end of the arc        varPre =Pstart;  for(vari=0; i < angle; i+=2) {//Inner arc in angle rangerad = (I+angleofslope) *math.pi/180;varcur = [R*math.cos (RAD) +newdot[0], R*math.sin (RAD) +newdot[1]];        DrawLine (pre,cur); Pre=cur; }    }

Three, fan

Connect the ends of the arc to the center of the circle

//Fan//Dot Polka Dot//R radius//Angle Central Angle//Angleofslope The angle of the x-axis to determine the direction of the fan//Whether pop pops up, that is, whether to deviate from the center//Title Tagfunctiondrawsector (dot, R, Angle, Angleofslope, pop, title) {varNewDot = [Dot[0], dot[1]]; varA = (ANGLEOFSLOPE+ANGLE/2) *math.pi/180; if(POP) {//calculates the new coordinates of the center PointNewdot[0] = dot[0]+10*Math.Cos (a); newdot[1] = dot[1]+10*Math.sin (a); }        if(!angleofslope) {Angleofslope= 0; }    varAOS = angleofslope*math.pi/180;varAos2 = (angleofslope+angle) *math.pi/180;varPstart = [Newdot[0]+r*math.cos (AOS), Newdot[1]+r*math.sin (AOS)];//the beginning of the arc    varPend = [Newdot[0]+r*math.cos (Aos2), Newdot[1]+r*math.sin (Aos2)];//the end of the arcDrawLine (Newdot,pstart);//Connecting Center and starting point    varPre =Pstart;  for(vari=0; i < angle; i+=2) {//Inner arc in angle rangerad = (I+angleofslope) *math.pi/180;varcur = [R*math.cos (RAD) +newdot[0], R*math.sin (RAD) +newdot[1]];        DrawLine (pre,cur); Pre=cur; } drawpolyline ([Pre, Pend, NewDot]); //make closed    //Stroke CenterDrawpoint ({pw:2,ph:2,color: ' darkred ', Point:dot}); //label    if(title) {document.write ("<span style= ' height:24px; line-height:24px; width:80px; Text-align:center; color:red; Position:absolute; Left: "+ (newdot[0]+r* (2/4) *math.cos (a) -40) +" PX; Top: "+ (newdot[1]+r* (2/4) *math.sin (a) -12) +" > "+title+" </span> "); }}

The two "circles" of JS drawing geometry