Javascript tips for drawing circles, arcs, and slices using javascript

This article mainly introduces how to use js to draw geometric images. This article mainly teaches you how to draw circles, arcs, and slices, for more information, see the relationship between the point p (x, y) on the circle with the lower radius r and the center O (x0, y0): x = x0 + rcosA; y = y0 + rsinA, A is A radian

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

I. Circle

The Code is as follows:

// Circular/elliptical
// Dot
// R radius
// CompressionRatio vertical compression ratio
Function drawCircle (dot, r, compressionRatio, data ){
Var pstart = [dot [0] + r, dot [1]; // start point
Var pre = pstart;
For (var I = 0; I <360; I + = 5 ){
Rad = I * Math. PI/180; // calculates the radian
// R * horizontal offset of the end point of the Math. cos (rad) arc to the dot
// R * vertical offset of the end point of the Math. sin (rad) arc to the dot
// CompressionRatio vertical compression ratio
Var cur = [r * Math. cos (rad) + dot [0], compressionRatio * r * Math. sin (rad) + dot [1];
DrawLine (pre, cur );
Pre = cur; // Save the coordinates of the current vertex
}
DrawLine (pre, pstart); // close
// Draw bullets
DrawPoint ({
Pw: 2, ph: 2, color: 'dark', point: dot
});
}

Ii. Arc

Just draw a part of the circle. The algorithm is similar to the circle.

The Code is as follows:

// Draw an arc
// Dot
// R radius
// Angle
// AngleOfSlope's angle to the X axis
// Whether pop is displayed
// Title Tag
Function drawArc (dot, r, angle, angleOfSlope, pop, title ){
Var newDot = [dot [0], dot [1];
Var a = (angleOfSlope + angle/2) * Math. PI/180;
If (pop) {// calculate the new coordinates of the center
NewDot [0] = dot [0] + 10 * Math. cos ();
NewDot [1] = dot [1] + 10 * Math. sin ();
}
If (! AngleOfSlope ){
AngleOfSlope = 0;
}
Var aos = angleOfSlope * Math. PI/180;
Var aos2 = (angleOfSlope + angle) * Math. PI/180;
Var pstart = [newDot [0] + r * Math. cos (aos), newDot [1] + r * Math. sin (aos)]; // the starting point of the arc
Var pend = [newDot [0] + r * Math. cos (aos2), newDot [1] + r * Math. sin (aos2)]; // The End Of The Arc
Var pre = pstart;
For (var I = 0; I <angle; I + = 2) {// draw an arc in the angle range
Rad = (I + angleOfSlope) * Math. PI/180;
Var cur = [r * Math. cos (rad) + newDot [0], r * Math. sin (rad) + newDot [1];
DrawLine (pre, cur );
Pre = cur;
}
}

Iii. Slice

Connect the two ends of the arc to the center

The Code is as follows:

// Slice
// Dot
// R radius
// Angle
// AngleOfSlope's angle to the X axis to determine the direction of the slice
// Whether pop pops up, that is, whether it is out of the center of the circle
// Title Tag
Function drawSector (dot, r, angle, angleOfSlope, pop, title ){
Var newDot = [dot [0], dot [1];
Var a = (angleOfSlope + angle/2) * Math. PI/180;
If (pop) {// calculate the new coordinates of the center
NewDot [0] = dot [0] + 10 * Math. cos ();
NewDot [1] = dot [1] + 10 * Math. sin ();
}
If (! AngleOfSlope ){
AngleOfSlope = 0;
}
Var aos = angleOfSlope * Math. PI/180;
Var aos2 = (angleOfSlope + angle) * Math. PI/180;
Var pstart = [newDot [0] + r * Math. cos (aos), newDot [1] + r * Math. sin (aos)]; // the starting point of the arc
Var pend = [newDot [0] + r * Math. cos (aos2), newDot [1] + r * Math. sin (aos2)]; // The End Of The Arc
DrawLine (newDot, pstart); // connects the center and start point
Var pre = pstart;
For (var I = 0; I <angle; I + = 2) {// draw an arc in the angle range
Rad = (I + angleOfSlope) * Math. PI/180;
Var cur = [r * Math. cos (rad) + newDot [0], r * Math. sin (rad) + newDot [1];
DrawLine (pre, cur );
Pre = cur;
}
DrawPolyline ([pre, pend, newDot]); // closes
// Draw the center
DrawPoint ({
Pw: 2, ph: 2, color: 'dark', point: dot
});
// Tag
If (title ){
Document. write ("" + title + "");
}
}

Isn't it so shocking that javascript can also do such cool things...