Die Beziehung zwischen dem Punkt P (x, y) auf einem Kreis mit einem Radius R und der Mitte des Kreises O (x0, y0): x = x0+rcosa; y = y0+rsina, a ist der Radian
Beispiel: http://www.zhaojz.com.cn/demo/draw6.html
1. Kreis
Die Codekopie lautet wie folgt:
// Kreis/Ellipse
// Punktpunkt
// r Radius
// Kompressionsratio vertikales Kompressionsverhältnis
Funktion DrawCircle (DOT, R, Compressionratio, Data) {
var pstart = [dot [0]+r, dot [1]]; // Startpunkt
var pre = pstart;
für (var i = 0; i <360; i+= 5) {
rad = i*math.pi/180; // Radians berechnen
//r*math.cos(rad) Der horizontale Versatz des Endpunkts des Bogens im Vergleich zum Punkt
//r*math.sin(rad) vertikaler Versatz des Endpunkts des Bogens im Vergleich zum Punkt
// Kompressionsratio vertikales Kompressionsverhältnis
var cur = [r*math.cos (rad)+dot [0], compressionRatio*r*math.sin (rad)+dot [1]];
DRAGLINE (PRE, CUR);
pre = cur; // Speichern Sie die Koordinaten des aktuellen Punktes
}
Drawline (vor, pstart); // geschlossen machen
// Punkte zeichnen
Drawpoint ({{
PW: 2, Ph: 2, Farbe: 'Darkred', Punkt: Punkt
});
}
2. Bogen
Zeichnen Sie einfach einen Teil des Kreises, der Algorithmus ähnelt dem Kreis
Die Codekopie lautet wie folgt:
// einen Bogen zeichne
// Punktpunkt
// r Radius
//Winkel
// Angleofslope-Winkel mit x-Achse
// ob Pop auftaucht
// Titel -Tag
Funktionsdrawar (DOT, R, Winkel, Winleofslope, Pop, Titel) {
var newdot = [dot [0], dot [1]];
var a = (Angleofslope+Winkel/2)*math.pi/180;
if (pop) {// Berechnen Sie die neuen Koordinaten der Mitte des Kreises
newdot [0] = dot [0]+10*math.cos (a);
Newdot [1] = Punkt [1]+10*Math.sin (a);
}
if (! Angleofslope) {
Angleofslope = 0;
}
var aoS = Angleofslope*math.pi/180;
var aoS2 = (Angleofslope+Winkel)*Math.pi/180;
var pstart = [newdot [0]+r*math.cos (aoS), newdot [1]+r*math.sin (aoS)]; // der Ausgangspunkt des Bogens
var pend = [newdot [0]+r*math.cos (aoS2), newdot [1]+r*math.sin (aoS2)]; // der Endpunkt des Bogens
var pre = pstart;
für (var i = 0; i <Angle; i+= 2) {// einen Bogen im Winkelbereich zeichnen
rad = (i+Angleofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
DRAGLINE (PRE, CUR);
pre = cur;
}
}
3. Lüfterform
Schließen Sie die beiden Enden des Bogens mit der Mitte des Kreises an
Die Codekopie lautet wie folgt:
//Sektor
// Punktpunkt
// r Radius
//Winkel
// Angleofslope Der Winkel zwischen der x-Achse bestimmt die Richtung der Sektorform
// ob Pop auftaucht, ob es von der Mitte des Kreises abweicht
// Titel -Tag
Funktion DrawSector (DOT, R, Winkel, Winleofslope, Pop, Titel) {
var newdot = [dot [0], dot [1]];
var a = (Angleofslope+Winkel/2)*math.pi/180;
if (pop) {// Berechnen Sie die neuen Koordinaten der Mitte des Kreises
newdot [0] = dot [0]+10*math.cos (a);
Newdot [1] = Punkt [1]+10*Math.sin (a);
}
if (! Angleofslope) {
Angleofslope = 0;
}
var aoS = Angleofslope*math.pi/180;
var aoS2 = (Angleofslope+Winkel)*Math.pi/180;
var pstart = [newdot [0]+r*math.cos (aoS), newdot [1]+r*math.sin (aoS)]; // der Ausgangspunkt des Bogens
var pend = [newdot [0]+r*math.cos (aoS2), newdot [1]+r*math.sin (aoS2)]; // der Endpunkt des Bogens
Drawline (Newdot, pstart); // Schließen Sie die Mitte des Kreises und den Startpunkt an
var pre = pstart;
für (var i = 0; i <Angle; i+= 2) {// einen Bogen im Winkelbereich zeichnen
rad = (i+Angleofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
DRAGLINE (PRE, CUR);
pre = cur;
}
Drawpolyline ([Pre, Pend, Newdot]); // geschlossen machen
// Zeichne die Mitte des Kreises
Drawpoint ({{
PW: 2, Ph: 2, Farbe: 'Darkred', Punkt: Punkt
});
//Etikett
if (title) {
document.write ("<span style = 'Höhe: 24px; Zeilenhöhe: 24px; Breite: 80px; Text-Align: Mitte; Farbe: Rot; Position: Absolute; links:"+(newTot [0]+r*(2/4)*Math.Cos (a) -40)+"px; "+(newdot [1]+r*(2/4)*math.sin (a) -12)+" '> "+title+" </span> ");
}
}
Ist es nicht schockierend? Es stellt sich heraus, dass JS so coole Dinge tun kann. . .