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

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

WBOY

Freigeben： 2016-05-16 16:20:52

Original

2333 Leute haben es durchsucht

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. . .