The relationship between the point p(x,y) on a circle with a radius r and the center of the circle O(x0,y0): x = x0+rcosA; y = y0+rsinA, A is the radian
Example: http://www.zhaojz.com.cn/demo/draw6.html
1. Circle
The code copy 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]]; //Start 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);// Make closed
//Draw dots
drawPoint({
pw:2,ph:2,color:'DarkRed',point:dot
});
}
2. Arc
Just draw part of the circle, the algorithm is similar to the circle
The code copy is as follows:
//Draw an arc
//dot dot
//r Radius
//angle
//angleOfSlope angle with x-axis
// Whether pop pops 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
The code copy is as follows:
//sector
//dot dot
//r Radius
//angle
//angleOfSlope The angle between the x-axis determines the direction of the sector shape
// 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 center of the circle and the 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]); // Make closed
//Draw the center of the circle
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>");
}
}
Isn't it shocking? It turns out that js can do such cool things. . .