Verwenden von JS zum Zeichnen von Punkten, Linien und Oberflächen. Javascript-Kenntnisse-js-Tutorial-php.cn

Verwenden von JS zum Zeichnen von Punkten, Linien und Oberflächen. Javascript-Kenntnisse

WBOY

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

Original

1483 Leute haben es durchsucht

Als mir die Idee des JS-Zeichnens in den Sinn kam, fand ich sie interessant und setzte sie in die Praxis um. JS Drawing ist eine Artikelserie, die sich ursprünglich mit Punkten, Linien und Flächen befasst

Schauen Sie sich zuerst das Beispiel an: http://www.zhaojz.com.cn/demo/draw5.html

1. Punkt

Wir verwenden hier das Span-Tag, um die Punkte darzustellen

Code kopieren Der Code lautet wie folgt:

// Punkte zeichnen, die Parameter sind die Größe, Farbe, Koordinaten und Beschriftung des Punkts; offensichtlich ist der opts-Parameter ein Objekt 

Funktion drawPoint(opts){

document.write("" (opts.point[2 ]?("" opts .point[2] "
"):"") "");

}

Mehrere Parameter:

opts.pw: Punktbreite

opts.ph: Die Höhe des Punktes, im Allgemeinen gleich opts.pw

opts.color: Punktfarbe

　opts.point: stellt die Position des Punktes dar, Punkt[0]: horizontale Position, Punkt[1]: vertikale Position, Punkt[2] ist die Beschriftung des Punktes

Hinweis: Das Positionsattribut muss absolut sein;

2. Gerade Linie

Eine gerade Linie besteht aus Punkten, daher müssen wir n Punkte zwischen zwei Punkten zeichnen. Optisch handelt es sich um eine gerade Linie.

Code kopieren Der Code lautet wie folgt:

//Linie zeichnen

//pstart Startpunkt

//Endpunkt aushängen

//wählt Parameter

Funktion drawLine(pstart, pend, opts){

var ph = 1;

var pw = 1;

var color = "DarkRed";

If(opts){

         color = opts.color ? opts.color: color;

}

var Steigung; //Steigung

var noSlope = false; //Gibt es eine Steigung

var hdist = pend[0] - pstart[0];

var vdist = pend[1] - pstart[1];

If(hdist != 0){

        Steigung = Math.abs(vdist/hdist); //Steigung berechnen

}else{

         noSlope = true; //Wenn hdist=0, hat die gerade Linie keine Steigung

}

var Gapp = pw > ph : pw; //Standardabstand zwischen benachbarten Punkten (Pixel in der oberen linken Ecke) 

var diagonal = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)); //Hypotenuse-Länge

var pn = parseInt(diagonal/gapp); //Berechnen Sie die Anzahl der Punkte zwischen zwei Punkten

If(pn < 3){pn=pn*3 1}; //Wenn die Anzahl der Punkte weniger als 3 beträgt, erhöhen Sie die Anzahl der Punkte, um sicherzustellen, dass mindestens ein Punkt vorhanden ist > wenn pn=0
var vgap = Math.abs(vdist)/pn; //Vertikaler Abstand zwischen zwei benachbarten Punkten

var hgap = Math.abs(hdist)/pn; //Horizontaler Abstand zwischen zwei benachbarten Punkten

for(var i = 0; i< pn ; i ){

                                                                                                                                           alität
​​​​ //hgap Der horizontale Abstand zwischen zwei benachbarten Punkten

​​​​ //vgap Der vertikale Abstand zwischen zwei benachbarten Punkten

​​​​ //hgap*i*(pend[0]
​​​​ //vgap*i*(pend[1]
//(pend[0]
//(pend[1]
​​​​ //(noSlope?0:1) Wenn die gerade Linie keine Steigung hat, ist der horizontale Versatz 0

        drawPoint({

             pw: pw,

ph: ph,

             Farbe: Farbe,

Punkt: [(hgap*i*(pend[0]
        });

}

}

Polylinien und Flächen können basierend auf Linien gezeichnet werden:

Polylinie:

Code kopieren Der Code lautet wie folgt:

//Polylinie

//ps eindimensionales Array von Punkten
Funktion drawPolyline(ps){
If(ps){
//Zeichne eine Linie
for(var i = 0; i              drawLine(ps[i], ps[i 1]);
}
//Zeichne den Wendepunkt
for(var i = 0; i              drawPoint({
                 pw: 3,
pH: 3,
                  Farbe: 'ROT',
Punkt: ps[i]
            });
}

}
}

Polygon:

Code kopieren Der Code lautet wie folgt:

//Polygon

//ps eindimensionales Array von Punkten

Funktion drawPolygon(ps){

If(ps){

//Zeichne eine Linie

for(var i = 0; i
             drawLine(ps[i], ps[i 1]);

}

​​​​ //Schließen

If(ps.length > 2){

             drawLine(ps[ps.length-1], ps[0])

}

​​​​ //Zeichne den Wendepunkt

for(var i = 0; i
             drawPoint({

                 pw: 3,

pH: 3,

                  Farbe: 'ROT',

Punkt: ps[i]

            });

}

}

}

Rechteck:

Code kopieren Der Code lautet wie folgt:

//Zeichne ein Rechteck

//leftTop Die Position des oberen linken Eckpunkts

//Breite Breite

//hoch hoch

Funktion drawRectangle(leftTop, width, high){

drawPolygon([

          leftTop,

         [leftTop[0], leftTop[1] high],

         [leftTop[0] width, leftTop[1] high],

[leftTop[0] width, leftTop[1]]

]);

//Polsterung

//document.write("");

}

Es stellt sich heraus, dass JS auch so coole Dinge kann, ich muss es wirklich sorgfältig studieren