Use JS drawing Circle, arc, fan _javascript skills

The relationship between the point P (x,y) on a circle with a radius of R and the center O (x0,y0): x = X0+rcosa; y = Y0+rsina, A is radians

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

One, round

Copy Code code as follows:

Round/Oval
Dot Dot Dot
R radius
Compressionratio Vertical Compression ratio
function drawcircle (dot, R, compressionratio, data) {
var pstart = [Dot[0]+r, dot[1]]; Starting point
var pre = Pstart;
for (Var i=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
The vertical offset of the end of a R*math.sin (RAD) arc relative 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; Saves the coordinates of the current point
}
DrawLine (Pre,pstart);//Make Closed
Stroke dot
Drawpoint ({
Pw:2,ph:2,color: ' darkred ', Point:dot
});
}

Two, Arc

is to draw a part of the circle, the algorithm is similar to the circle

Copy Code code as follows:

Draw Arc
Dot Dot Dot
R radius
Angle angle
The angle between the Angleofslope and the x axis
Whether pop pops up
Title label
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 (a);
NEWDOT[1] = Dot[1]+10*math.sin (a);
}
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 beginning of an arc
var pend = [Newdot[0]+r*math.cos (Aos2), Newdot[1]+r*math.sin (Aos2)]; The end of an arc
var pre = Pstart;
for (var i=0 i < angle; i+=2) {//Arcs in 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;
}
}

Three, fan-shaped

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

Copy Code code as follows:

Sector
Dot Dot Dot
R radius
Angle angle
The angle between the Angleofslope and the X axis to determine the direction of the sector
Whether the pop pops up, that is, whether it deviates from the center
Title label
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 (a);
NEWDOT[1] = Dot[1]+10*math.sin (a);
}
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 beginning of an arc
var pend = [Newdot[0]+r*math.cos (Aos2), Newdot[1]+r*math.sin (Aos2)]; The end of an arc
DrawLine (Newdot,pstart); Connecting Center and starting point
var pre = Pstart;
for (var i=0 i < angle; i+=2) {//Arcs in 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]); Make closed
Stroke Center
Drawpoint ({
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> ");
}
}

is not very shocking, the original JS can also do so cool things ...