Verwenden Sie js zum Zeichnen von Kreisen, Bögen und Sektoren. Javascript-Fähigkeiten

Die Beziehung zwischen Punkt p(x,y) auf dem Kreis mit Radius r und dem Mittelpunkt O(x0,y0): x = x0 rcosA; y = y0 rsinA, A ist Bogenmaß

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

1. Kreis

Code kopieren Der Code lautet wie folgt:

//Kreis/Ellipse
//Punkt Punkt
//r Radius
//compressionRatio vertikales Komprimierungsverhältnis
Funktion drawCircle(dot, r, compressRatio, data){
var pstart = [dot[0] r, dot[1]]; //Startpunkt
var pre = pstart;
for(var i=0; i < 360; i =5){
rad = i*Math.PI/180; //Bogenmaß berechnen
//r*Math.cos(rad) Der horizontale Versatz des Endpunkts des Bogens relativ zum Punkt
//r*Math.sin(rad) Vertikaler Versatz des Endpunkts des Bogens relativ zum Punkt
//compressionRatio vertikales Komprimierungsverhältnis
         var cur = [r*Math.cos(rad) dot[0], compressionRatio*r*Math.sin(rad) dot[1]];
        drawLine(pre,cur);
          pre = cur; //Speichere die Koordinaten des aktuellen Punktes
}
DrawLine(pre,pstart);//Close
//Zeichne Punkte
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
}

2. Bogen

Zeichnen Sie einfach einen Teil des Kreises. Der Algorithmus ähnelt dem Kreis

Code kopieren Der Code lautet wie folgt:

//Bogen zeichnen
//Punkt Punkt
//r Radius
//Winkel Zentralwinkel
//angleOfSlope und der Winkel zwischen der x-Achse
//pop, ob angezeigt werden soll
//Titel-Tag
Funktion drawArc(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (angleOfSlope angle/2)*Math.PI/180; If(pop){ //Berechnen Sie die neuen Koordinaten des Kreismittelpunkts
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)] //Der Startpunkt des Bogens
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)] //Der Endpunkt des Bogens
var pre = pstart;
for(var i=0; i < angle; i =2){ //Zeichne einen Bogen innerhalb des Winkelbereichs
         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. Fächerform

Verbinden Sie die beiden Enden des Bogens mit der Mitte des Kreises

Code kopieren Der Code lautet wie folgt:

//Sektor
//Punkt Punkt
//r Radius
//Winkel Zentralwinkel
//Der angleOfSlope und die x-Achse bestimmen die Richtung des Sektors
// ob Pop auftaucht, das heißt, ob er vom Mittelpunkt des Kreises abweicht
//Titel-Tag
Funktion drawSector(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (angleOfSlope angle/2)*Math.PI/180; If(pop){ //Berechnen Sie die neuen Koordinaten des Kreismittelpunkts
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)] //Der Startpunkt des Bogens
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)] //Der Endpunkt des Bogens
drawLine(newDot,pstart); //Kreismitte und Startpunkt verbinden
var pre = pstart;
for(var i=0; i < angle; i =2){ //Zeichne einen Bogen innerhalb des Winkelbereichs
         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
//Zeichne den Mittelpunkt des Kreises
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
// Tag
If(title){
document.write("" title "< ;/span>");
}
}

Ist es nicht schockierend? Es stellt sich heraus, dass js so coole Dinge tun kann. . .

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn