Using javascript to draw a line _ javascript tips-js tutorial

This article mainly introduces the use of js to draw geometric graphics series of tutorials in the painting tangent, very convenient we have a good understanding of javascript, it is recommended to everyone example: http://www.zhaojz.com.cn/demo/draw9.html

The Code is as follows:

// Draw the tangent
// Point a point outside the circle
// Dot Center
// R radius
Function drawCircleTangent (point, dot, r ){
// Draw the Guides-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 of the center
DrawLine (dot, [dot [0], dot [1]-4 * r], {color: color2}); // draw the vertical line of the center
DrawPoint ({
Pw: 2, ph: 2, color: 'dark', point: [dot [0] + 9 * r, dot [1], 'x']
});
DrawPoint ({
Pw: 2, ph: 2, color: 'dark', point: [dot [0], dot [1]-4 * r, 'y']
});
DrawLine (point, [point [0], dot [1], {color: color2}); // draw a vertical line from point to X axis
DrawLine (point, dot, {color: color2}); // connection point and dot
DrawLine ([point [0]-2 * r, point [1], [point [0] + 2 * r, point [1], {color: color2}); // draw the horizontal line of the point
// Draw the Guides-end
// Point. push ('point ');
DrawPoint ({
Pw: 2, ph: 2, color: 'dark', point: point
});
// Dot. push ('center ');
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 the center
Var c = Math. sqrt (c_square); // 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 the cut point
Var B = Math. sqrt (B _square); // distance from point to cut point
Var sinB = B/c; // sinB
Var cosB = r/c; // cosB
// Use the circle center as the coordinate dot to determine the quadrant of the point
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. When the value is-1, the point is in a three quadrant. When the value is + 1, The point is in the two four quadrant. When the value is 0, the point is on the axis.
Switch (hv ){
Case 1:
If (pm_h + pm_v) =-2 ){
Quadrant = 2; // Second quadrant
} Else {
Quadrant = 4; // quadrant
}
Break;
Case-1:
If (pm_h-pm_v) =-2 ){
Quadrant = 3; // third quadrant
}
Break;
Case 0:
If (pm_h + pm_v) =-1) {// when the point is in the negative half axis of the X axis or the positive Half Axis of the Y axis, it is determined that the point is in the second quadrant.
Quadrant = 2;
}
If (pm_h + pm_v) = 1) {// when the point is in the positive Half Axis of the X axis or the negative half axis of the Y axis, it is determined that the 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]; // point
DrawLine (point, tangentPointA, {color: color}); // draw the tangent
DrawLine (dot, tangentPointA, {color: color2}); // connects the dot and the cut point
// DrawArc (point, 17, (quadrant = 1 | quadrant = 4? 180: 0)-(quadrant = 2 | quadrant = 3? (-1): 1) x Math. asin (sinC) * 180/Math. PI, 0 );
Var tangentPointB = [point [0] + B * conD, point [1] + B * sinD]; // point B
DrawLine (point, tangentPointB, {color: color}); // draw the tangent
DrawLine (dot, tangentPointB, {color: color2}); // connects the dot and the cut point
// DrawArc (point, 27, (quadrant = 1 | quadrant = 4? 180: 0)-(quadrant = 2 | quadrant = 3? (-1): 1) * Math. asin (sinD) * 180/Math. PI, 0 );
DrawPoint ({// stroke point
Pw: 3, ph: 3, color: 'dark', point: tangentPointA
});
DrawPoint ({// stroke point
Pw: 3, ph: 3, color: 'dark', point: tangentPointB
});
// Draw an auxiliary arc
// (Quadrant = 1 | quadrant = 4? 360: 0)
DrawArc (point, B, 60, (quadrant = 1 | quadrant = 4? 180: 0)-(quadrant = 2 | quadrant = 3? (-1): 1) x Math. asin (sinC) * 180/Math. PI-5 );
}