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

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

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