Wenn Sie noch nicht wissen, was Leinwand ist, können Sie den vorherigen Artikel überprüfen.
Beim Lernen zum Zeichnen sind Linien die grundlegendsten und die Verbindung von Linien kann jede Form bilden. Gleiches gilt für Leinwand.
Bevor wir beginnen, nehmen wir die Leinwand und Pinsel heraus:
var cvs = document.getElementById ('CVS'); //Leinwand
var ctx = cvs.getContext ('2d'); // Bürste
Wenn wir zeichnen, ist der Stiftpunkt nicht festgelegt und ändert sich jederzeit. Obwohl Leinwand den Schreibpunkt nicht durch die Hände bestimmt, gibt es auch eine Methode, nämlich Moveto. Moveto entspricht dem Anheben der Spitze des Stifts von der Leinwand und dem Verschieben auf den angegebenen Punkt (d. H. Koordinaten).
ctx.moveto (x, y)
Während dieses Prozesses werden keine Grafiken gezeichnet, was dem Umschweusen auf der Leinwand mit Ihrem Stift entspricht.
Aber es ist nutzlos, herumzuschwanken, wir müssen anfangen zu zeichnen. Zeichnen Sie die einfachsten: gerade Linien
Die Methode zum Zeichnen einer geraden Linie ist Lineto. Seine Parameter sind die gleichen wie Moveto und beide sind der gleiche Punkt.
Ctx.lineto (x, y) natürlich, wenn Sie eine Linie zeichnen, bewegt sich auch der Stiftpunkt, so dass der Stiftpunkt nach dem Lineto zu seinem Zielpunkt wird.
ctx.moveto (100.100);
ctx.lineto (200.100);
Zu diesem Zeitpunkt aktualisieren Sie die Webseite und werden feststellen, dass die Leinwand keine erwartete Zeile und nichts erwartet hat. Weil wir einen Schritt weniger haben. Lineto ist tatsächlich ein Weg gezogen und für sich selbst unsichtbar. Wenn wir wollen, dass er es zeigt, müssen wir ihn zeichnen.
Schüler, die PS verwendet haben, werden definitiv die beiden Modi der Grafik kennen, einer füllt und der andere ist Schlaganfall. Jetzt haben wir eine Linie gezogen, die dem Zeichnen eines Pfades in PS entspricht. Zu diesem Zeitpunkt können wir die Kanten des Pfades zeichnen und die Abbildung wird angezeigt.
Die Methode des Leinwandschlags ist Schlaganfall (). Lassen Sie uns nun den Code vervollständigen:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.stroke (); zu diesem Zeitpunkt aktualisieren und Sie können eine Linie sehen. Natürlich können Sie auch nacheinander Hunderte von Wegen zeichnen und dann Schlaganfallaktionen ausführen, um Hunderte von Linien gleichzeitig zu zeichnen. Zeichnen wir nun ein Rechteck mit 4 Zeilen:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.stroke ();
Hier zeichnen wir zuerst alle Wege und streicheln sie dann nacheinander.
- Die Beschwerde des Autors: Eines der schlechten Dinge an der Zeichnung von Leinwand ist, dass es im Grunde von Vermutungen abhängt und nicht intuitiv ist.
Ernsthafter Tipp: Der Zeichnungsprozess von Leinwand (d. H. Füllung und Schlaganfall) ist sehr ressourcenaufwendig. Wenn Sie Systemressourcen sparen und die Effizienz verbessern möchten, zeichnen Sie am besten alle Pfade und füllen oder streicheln Sie die Zahl sofort.
Aus der obigen Abbildung können wir sehen, dass die Standarddicke 1px beträgt, während die Linienfarbe schwarz ist. Natürlich können wir sie setzen, aber das Seltsame ist, dass die Linienbreite eine Linienbreite ist, während der Linienstil als Strokestyle bezeichnet wird. Warum nicht Linestyle? Ich weiß es auch nicht. :
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
Der obige Code legt die Zeilenbreite auf 10px fest und die Linienfarbe wird durchscheinend rot.
Wie in Abbildung 1 gezeigt, erfrischen Sie es, es scheint, dass etwas nicht stimmt! Warum scheint es in der oberen linken Ecke ein kleines Stück zu fehlen? Dies ist keine Illusion. Der Grund beginnt mit der Art und Weise, wie die Zeichnung von Leinwandleitungen in der Leinwand.
Frage: Wenn der Pfad des Rechtecks, den ich zeichne, 100 in Breite und Höhe und meine Breite der Kante 10px beträgt, wie hoch ist die Gesamtbreite und Höhe dieses Rechtecks mit der gezeichneten Kante? Ist es 100+10*2 = 120?
Wenn die Kante außerhalb des Pfades vollständig gezogen ist, dann ist er 120. Leinwand ist es jedoch nicht. Die Linien in Leinwand haben eine Mittellinie, die sich in der absoluten Mitte der Linie befindet, und die Striche der Linie erstrecken sich mit der Mittellinie auf beide Seiten. Wenn Ihre Linienbreite beispielsweise 1 beträgt, liegt die Mittellinie bei 0,5; Wenn die Breite 5 beträgt, liegt die Mittellinie bei 2,5. Wenn die Canvas -Figur gestreichelt ist, passt der Pfad in die Mittellinie der Linie und schlägt dann. Wie in Abbildung 2 gezeigt:
Daher ist die Hälfte der Linie außen und die Hälfte innen, dh die Gesamtbreite des oberen Rechtecks beträgt 100+ (10/2)*2, was gleich 110 entspricht.
Genau aus diesem Grund ist es natürlich, eine fehlende Ecke in der oberen linken Ecke zu haben. Weil niemand es hier gemalt hat.
Aber warum gibt es in den verbleibenden Ecken keine Lücken? Schauen Sie sich Ihr Bild an, gibt es nicht Lücken in den vier Ecken?
Das liegt daran, dass ich die Bürste während der Zeichnung von Linien nicht angehoben habe und die Bürsten kontinuierlich waren, das heißt, ich habe mich vorher nicht bewegt. Wenn Sie es nicht glauben, lassen Sie uns jetzt MoveTo:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.moveto (200.100); // Beachten Sie hier
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Wir bewegten uns, bevor wir die zweite Zeile gezogen haben, und die Koordinaten des Moveto haben sich nicht geändert, und es ist immer noch der gleiche Punkt, aber nach dem Erfrischen wird die Figur wie diese [Abbildung 3]:
Verstanden? Weil wir den Stift erhöht haben.
Lassen Sie uns nun Moveto löschen. Machen Sie sich keine Sorgen, denken wir darüber nach, wie Sie die fehlende Ecke in der oberen linken Ecke füllen können.
Lassen Sie mich zunächst eine Frage stellen, ist unser Weg geschlossen? Ist das nicht der Unsinn? Haben wir den Pfad nicht bereits wieder an den Ursprung gewandt? Natürlich ist es geschlossen!
falsch! Dies macht nur den letzten Punkt des Pfades mit dem Ausgangspunkt, aber der Pfad selbst ist nicht geschlossen!
Wie schließt man den Weg in Leinwand? Verwenden Sie Conepath ().
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
CTX.CLOSEPATH (); // Close Pfad
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Das Erfrischen zu dieser Zeit macht Sie zu einem perfekten Quadrat. Abbildung 4:
Egal wie dick wir die Linien ändern - desto dicker, je mehr Menschen sie mögen, oder? -Die vier Ecken dieses Quadrats sind normale rechte Winkel und sind nicht glatt. Was ist der Fall mit einer glatten Ecke? Bitte beachten Sie den quadratischen Schlag in PS, Abbildung 5:
Ich habe es gesehen. Je dicker die Kante ist, desto größer ist der Bogen seines Winkels.
Wenn ich denke, dass die Kantenlinien in Leinwand die gleichen wie in PS sind, gibt es irgendwie? Natürlich gibt es das Zeilenattribut.
LineJoin, was den Schnittpunkt der Linien bedeutet, hat 3 Eigenschaften: Gehrung (Standard, scharfe Ecke), Abschrägung (Abent) und Runde (rund), wie in Abbildung 6 gezeigt:
Es besteht kein Zweifel, dass wir verstehen können, dass unser Rechteck scharfe Ecken verwendet. Versuchen Sie also, es in abgerundete Ecken zu wechseln:
Die Grafik wurde so, Abbildung 7:
Es ist ein bisschen wie PS, oder?
Darüber hinaus können wir aus dem vorherigen Bild erfuhren, dass die beiden Enden der Leinwandlinie flach sind, kann es geändert werden? Schließlich sieht es nicht gut aus.
Es ist auch möglich, dh die Linecap -Eigenschaft, die der Endpunkt ist, der die Linie definiert. Die Linecap hat 3 Werte: Hintern (flach, standardmäßig), rund (Kreis), Quadrat (Quadrat), wie in Abbildung 8 gezeigt
Sie können feststellen, dass der flache Kopf tatsächlich der gleiche wie der quadratische Kopf ist. Der einzige Unterschied besteht darin, dass der flache Kopf nicht ausgestreckt ist. Sowohl der runde Kopf als auch der quadratische Kopf sind in einem Stück ausgestreckt. Wie lang ist dieser Abschnitt? Das ist die halbe Breite der Linie.
Hast du jemals an etwas gedacht? Haha, das vorherige Problem mit geschlossenem Pfad, wenn wir Linecap als Quadratheader festlegen, wird der Effekt der gleiche sein!
Aber um auf der sicheren Seite zu sein, müssen wir immer noch den Weg schließen, denken Sie daran!
Ich möchte Sie auch daran erinnern: Der geschlossene Pfad hat keine Endpunkte! Der Stil des Endpunkts ist also auf dem geschlossenen Pfad nicht sichtbar.
Zusätzlich : Linecap ist ein bisschen ähnlich wie LineJoin. Achten Sie darauf, nicht herumzuspielen.Wenn Sie scharfäugig sind und Pech haben, können Sie feststellen, dass die Linien von 1 Pixel manchmal nicht 1 Pixel breit sind, aber breiter und verschwommen zu sein scheinen. Wie in Abbildung 9 gezeigt:
Glückwunsch! Sie haben auf einen Fehler gestoßen, der kein Fehler war. Dies ist etwas ganz Besonderes, ich werde ihn in den nächsten Artikel setzen