JS painting Geometry of the five "over the circle a point as a tangent"

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

//Draw tangents//a dot outside the point circle//Dot Center//R radiusfunctiondrawcircletangent (point, Dot, r) {//Draw Auxiliary Line-start    varcolor = ' darkred ';//the color of the tangent    varColor2 = "#ccc";//Color of other auxiliary linesDrawLine (dot, [dot[0]+9*r,dot[1]], {color:color2});//extend the horizontal line where the center is locatedDrawLine (dot, [Dot[0],dot[1]-4*r], {color:color2});//draw the vertical line where the center of the CircleDrawpoint ({pw:2,ph:2,color: ' darkred ', point: [Dot[0]+9*r,dot[1], ' x ']    }); Drawpoint ({pw:2,ph:2,color: ' darkred ', point: [Dot[0],dot[1]-4*r, ' Y ']    }); DrawLine (Point, [point[0],dot[1]], {color:color2});//draw a point to the x-axis vertical lineDrawLine (point, Dot, {color:color2});//connect point and DotDrawLine ([Point[0]-2*r, Point[1]], [Point[0]+2*r, Point[1]], {color:color2});//draw the horizontal line where point    //Draw Auxiliary Line-end    //point.push (' point ');Drawpoint ({pw:2,ph:2,color: ' darkred ', point:point}); //Dot.push (' centre ');            varR_square = Math.pow (r,2);//the square of R    varPoint_v = point[1]-dot[1];//The square of the distance from the point to the x-axis    varPoint_h = point[0]-dot[0];//The square of the distance from the point to the Y axis    varC_square = Math.pow (point_v,2) + Math.pow (point_h,2);//The square of the distance from point to center        varc = math.sqrt (C_square);//distance of point to center Point        varSinA = Math.Abs (point_v)/C; SinAvarCosA = Math.Abs (point_h)/C; CosAvarB_square = C_square-r_square;//The square of the distance from point to tangent    varb = math.sqrt (B_square);//distance of point to tangent point        varSINB = b/c; SinbvarCOSB = r/c; Cosb//to determine the quadrant of a point in the center of the coordinate circle    varQuadrant = 1;//Default Value    varPm_h = Point_h = = 0? Point_h:point_h/math.abs (Point_h); Horizontal directionvarPm_v = Point_v = = 0? Point_v:point_v/math.abs (POINT_V); Vertical directionvarHV = Pm_h*pm_v;//Multiply,-1 o'clock Point in 13 quadrant, + 1 o'clock in 24 quadrant, 0 o'clock    Switch(HV) { Case1:            if((Pm_h+pm_v) ==-2) {Quadrant= 2;//Second Quadrant}Else{Quadrant= 4;//Fourth Quadrant            }             Break;  Case-1:            if((Pm_h-pm_v) ==-2) {Quadrant= 3;//Third Quadrant            }             Break;  Case0:            if((PM_H+PM_V) ==-1) {//Point in the negative half axis of the x-axis or the positive half axis of the y-axis, the point is determined in the second quadrantQuadrant = 2; }            if((PM_H+PM_V) ==1) {//Point in the fourth quadrant of the x-axis, or the negative half axis of the y-axis, determines the pointQuadrant = 4; }             Break; default:    }    varSinC = 0; varConC = 0; varSinD = 0; varConD = 0; Switch(quadrant) { Case1: SinC= Cosb*cosa+sinb*sina;//SinC = sin (90+ (b-a)) = cos (b-a) = Cosb*cosa+sinb*sinaConC =-(Sinb*cosa-cosb*sina);//cosC = cos (90+ (b-a)) =-sin (b-a) =-(Sinb*cosa-cosb*sina)SinD =-(COSA*COSB-SINA*SINB);//SinD = sin (270-(a+b))ConD =-(SINA*COSB+COSA*SINB);//conD = cos (270-(a+b))             Break;  Case2: SinC=-(Cosb*cosa-sinb*sina);//SinC = sin ( -90+ (a+b))ConC = SINA*COSB+COSA*SINB;//conC = cos ( -90+ (a+b))SinD = COSA*COSB+SINA*SINB;//SinD = sin (90+ (A-B))ConD =-(SINA*COSB-COSA*SINB);//conD = cos (90+ (A-B))             Break;  Case3: SinC=-(COSA*COSB+SINA*SINB);//SinC = sin ( -90+ (A-B))ConC =-(SINA*COSB-COSA*SINB);//conC = cos ( -90+ (A-B))SinD = (cosa*cosb-sina*sinb); ConD= sina*cosb+cosa*sinb;  Break;  Case4: SinC= cosa*cosb-sina*sinb; ConC=-(sina*cosb+cosa*sinb) SinD=-(COSA*COSB+SINA*SINB);//SinD = sin (270+ (A-B))ConD = (SINA*COSB-COSA*SINB);//conD = cos (270+ (A-B))             Break; default:    }        varTangentpointa = [Point[0]+b*conc, point[1]+b*sinc];//Tangent point a positionDrawLine (Point, Tangentpointa, {color:color});//Draw a tangentDrawLine (dot, Tangentpointa, {color:color2});//connecting Dots and tangency points    //DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi, 0);        varTANGENTPOINTB = [Point[0]+b*cond, Point[1]+b*sind];//Tangent point B positionDrawLine (Point, Tangentpointb, {color:color});//Draw a tangentDrawLine (dot, tangentpointb, {color:color2});//connecting Dots and tangency points    //DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinD) *180/math.pi, 0);Drawpoint ({//tangencyPw:3,ph:3,color: ' darkred ', Point:tangentpointa}); Drawpoint ({//tangencyPw:3,ph:3,color: ' darkred ', POINT:TANGENTPOINTB}); //Drawing Auxiliary Arcs    //(Quadrant ==1 | | quadrant==4?360:0)DrawArc (point, B, Max, (Quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi-5);}

JS painting Geometry of the five "over the circle a point as a tangent"