Use JS drawing to draw the tangent _javascript skill

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

Copy Code code as follows:

Draw Tangent
Point round outside the dot
Dot Center
R radius
function drawcircletangent (point, Dot, R) {
Draw Auxiliary Line-start
var color = ' darkred '; The color of the tangent
var color2 = "#ccc"; Color of other guides
DrawLine (dot, [dot[0]+9*r,dot[1]], {color:color2}); Extend the horizontal line where the center of the circle
DrawLine (dot, [Dot[0],dot[1]-4*r], {color:color2}); Draw the vertical line where the center of the circle is
Drawpoint ({
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 the vertical line to the X axis
DrawLine (point, Dot, {color:color2}); Connecting Point and Dot
DrawLine ([Point[0]-2*r, Point[1]], [Point[0]+2*r, Point[1]], {color:color2}); Draw the horizontal line where point is
Draw Auxiliary Line-end
Point.push (' point ');
Drawpoint ({
Pw:2,ph:2,color: ' darkred ', point:point
});
Dot.push (' centre ');
var r_square = Math.pow (r,2); The square of R
var point_v = point[1]-dot[1]; The square of the distance from point to x-axis
var point_h = point[0]-dot[0]; The square of the distance from point to y-axis
var c_square = Math.pow (point_v,2) + Math.pow (point_h,2); The square of the distance from point to center
var c = math.sqrt (C_square); The distance from point to center
var SinA = Math.Abs (point_v)/C; SinA
var CosA = Math.Abs (point_h)/C; CosA
var b_square = C_square-r_square; The square of the distance from point to tangent
var B = math.sqrt (B_square); The distance from point to tangent
var sinb = b/c; Sinb
var cosb = r/c; Cosb
With the center of the circle as the coordinate dot, determine the quadrant where the point is
var quadrant = 1; Default value
var Pm_h = Point_h = = 0? Point_h:point_h/math.abs (Point_h); Horizontal direction
var Pm_v = Point_v = = 0? Point_v:point_v/math.abs (POINT_V); Vertical direction
var hv = Pm_h*pm_v; Multiply,-1 o'clock Point in the 13 quadrant, + 1 o'clock in the 24 quadrant, and 0 o'clock on the axis
Switch (HV) {
Case 1:
if ((Pm_h+pm_v) ==-2) {
Quadrant = 2; Second Quadrant
}else{
Quadrant = 4; Quadrant Four
}
Break
Case-1:
if ((Pm_h-pm_v) ==-2) {
Quadrant = 3; Third Quadrant
}
Break
Case 0:
if ((Pm_h+pm_v) ==-1) {//point is in the negative half axis of the x-axis or the positive half of the y-axis, it is concluded that point is in the second quadrant
Quadrant = 2;
}
if ((Pm_h+pm_v) ==1) {//point on the positive half of the x-axis or the negative half of the y-axis, determine that point is in the fourth quadrant
Quadrant = 4;
}
Break
Default
}
var SinC = 0;
var conc = 0;
var SinD = 0;
var ConD = 0;
Switch (quadrant) {
Case 1:
SinC = Cosb*cosa+sinb*sina; SinC = sin (90+ (b-a)) = cos (b-a) = Cosb*cosa+sinb*sina
Conc =-(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
Case 2:
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
Case 3:
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
Case 4:
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
}
var Tangentpointa = [Point[0]+b*conc, point[1]+b*sinc]; Tangent point a position
DrawLine (Point, Tangentpointa, {color:color}); Draw the Tangent
DrawLine (dot, Tangentpointa, {color:color2}); Connecting Dots and Pointcuts
DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi, 0);
var tangentpointb = [Point[0]+b*cond, Point[1]+b*sind]; Tangent point B position
DrawLine (Point, Tangentpointb, {color:color}); Draw the Tangent
DrawLine (dot, tangentpointb, {color:color2}); Connecting Dots and Pointcuts
DrawArc (Point, quadrant ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinD) *180/math.pi, 0);
Drawpoint ({//Stroke tangent
Pw:3,ph:3,color: ' darkred ', Point:tangentpointa
});
Drawpoint ({//Stroke tangent
Pw:3,ph:3,color: ' darkred ', POINT:TANGENTPOINTB
});
Draw Auxiliary Arc
(Quadrant ==1 | | quadrant==4?360:0)
DrawArc (point, B, quadrant, ==1 | | quadrant==4?180:0)-(Quadrant ==2 | | Quadrant==3? ( -1): 1) *math.asin (SinC) *180/math.pi-5);
}