Use js to draw circles, arcs, and sectors_javascript skills

The relationship between point p(x,y) on the circle with radius r and the center O(x0,y0): x = x0 rcosA; y = y0 rsinA, A is radians

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

1. Circle

Copy code The code is as follows:

//Circle/Ellipse
//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) The horizontal offset of the end point of the arc relative to dot
//r*Math.sin(rad) Vertical offset of the end point of the arc relative to 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 point
}
DrawLine(pre,pstart);//Close
//Draw dots
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
}

2. Arc

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

Copy code The code is as follows:

//Draw arc
//dot dot
//r radius
//angle central angle
//angleOfSlope and the angle between the x-axis
//pop whether to pop up
//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 of the circle
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 starting point of the arc
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)]; //The end point of the arc
var pre = pstart;
for(var i=0; i < angle; i =2){ //Draw an arc within 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;
}
}

3. Fan shape

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

Copy code The code is as follows:

//Sector
//dot dot
//r radius
//angle central angle
//The angleOfSlope and the x-axis determines the direction of the sector
// whether pop pops up, that is, whether it deviates from 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 of the circle
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 starting point of the arc
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)]; //The end point of the arc
drawLine(newDot,pstart); //Connect the circle center and starting point
var pre = pstart;
for(var i=0; i < angle; i =2){ //Draw an arc within 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]); //Close
//Draw the center of the circle
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
// Tag
If(title){
document.write("" title "< ;/span>");
}
}

Isn’t it shocking? It turns out that js can do such cool things. . .