html5 Canvas-Zeichen-Tutorial (2) – Zeichnen von geraden Linien und Festlegen von Linienstilen wie Farbe/Endpunkt/Schnittpunkt_html5-Tutorial-Fähigkeiten

Wenn Sie immer noch nicht wissen, was Canvas ist, können Sie den vorherigen Artikel lesen Beim Zeichnenlernen sind Linien am grundlegendsten, und durch die Verbindung von Linien können beliebige Grafiken entstehen. Dasselbe gilt auch für Canvas.
Bevor wir beginnen, nehmen wir die Leinwand und die Pinsel heraus:

Kopieren Sie den CodeDer Code lautet wie folgt :

var cvs = document.getElementById('cvs'); // Canvas
var ctx = cvs.getContext('2d'); // Brush

Lass uns zeichnen Beim Schreiben ist der Ausgangspunkt nicht festgelegt und kann sich jederzeit ändern. Obwohl Canvas den Schreibpunkt nicht manuell bestimmt, gibt es eine Methode, nämlich moveTo. Die Funktion von moveTo entspricht dem Abheben der Stiftspitze von der Leinwand und dem anschließenden Bewegen zum angegebenen Punkt (d. h. Koordinaten).

Code kopierenDer Code lautet wie folgt:

ctx.moveTo(x, y)

Während dieses Vorgangs werden keine Grafiken gezeichnet, was bedeutet, dass Sie den Stift auf der Leinwand baumeln lassen.
Aber es hat keinen Sinn, herumzuhängen, wir müssen mit dem Zeichnen beginnen. Zeichnen wir zuerst die einfachste: eine gerade Linie.
Die Methode zum Zeichnen einer geraden Linie ist lineTo. Ihre Parameter sind die gleichen wie moveTo, was ein Punkt ist.
ctx.lineTo(x,y) Wenn Sie eine Linie zeichnen, bewegt sich natürlich auch der Schreibpunkt, sodass der Schreibpunkt nach lineTo zum Zielpunkt wird.

Code kopierenDer Code lautet wie folgt:

ctx.moveTo(100,100) ;
ctx.lineTo(200,100);

Wenn Sie die Webseite aktualisieren, werden Sie feststellen, dass es überhaupt keine erwartete Linie auf der Leinwand gibt. Da uns ein Schritt fehlt, handelt es sich bei lineTo tatsächlich um einen gezeichneten „Pfad“, der selbst unsichtbar ist. Wenn wir möchten, dass er angezeigt wird, müssen wir ihn „zeichnen“.
Schüler, die PS verwendet haben, kennen auf jeden Fall die beiden Grafikmodi: Füllen und Strich. Nachdem wir nun eine Linie gezeichnet haben, entspricht dies dem Zeichnen eines Pfads in PS. Zu diesem Zeitpunkt können wir den Rand des Pfads zeichnen und die Grafiken werden angezeigt.
Die Canvas-Strichmethode ist Stroke(). Vervollständigen wir nun den Code:

Code kopieren Der Code ist wie folgt:

ctx.moveTo(100,100);
ctx.lineTo(200,100);

ctx.Stroke(); Sie können eine Linie sägen. Natürlich können Sie auch Hunderte von Pfaden fortlaufend zeichnen und dann die Strichaktion ausführen, um Hunderte von Linien gleichzeitig zu zeichnen. Zeichnen wir nun ein Rechteck mit 4 Linien:

Kopieren Sie den Code Der Code lautet wie folgt:

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(100,100); ;
ctx.Stroke();


Hier zeichnen wir zuerst den gesamten Pfad und streichen ihn dann auf einmal.
——–Beschwerde des Autors: Ein Nachteil des Canvas-Zeichnens besteht darin, dass es im Wesentlichen auf Vermutungen basiert, was sehr unintuitiv ist.

Ernsthafte Erinnerung: Der Prozess des Zeichnens der Leinwand (d. h. Füllen und Streichen) ist sehr ressourcenintensiv. Wenn Sie Systemressourcen sparen und die Effizienz verbessern möchten, ist es am besten, alle Pfade zu zeichnen und dann die Grafiken auf einmal zu füllen oder zu streichen.
Aus der obigen Grafik können wir ersehen, dass die Standardlinienstärke 1 Pixel beträgt und die Linienfarbe Schwarz ist. Natürlich können wir sie festlegen, aber das Seltsame ist, dass das Festlegen der Linienbreite lineWidth ist, das Festlegen des Linienstils jedoch StrokeStyle. Ich weiß es auch nicht. :

Code kopieren

Der Code lautet wie folgt:

ctx.lineWidth = 10 ;

ctx.StrokeStyle = 'rgba(255,0,0,0.5)';
Der obige Code legt die Linienbreite auf 10 Pixel und die Linienfarbe auf durchscheinendes Rot fest.

Wie in Abbildung 1 gezeigt, aktualisieren Sie es, etwas scheint nicht zu stimmen! Warum fehlt in der oberen linken Ecke ein kleines Stück? Das ist keine Illusion. Der Grund liegt in der Strichzeichnungsmethode der Leinwand.
Frage: Wenn der rechteckige Pfad, den ich zeichne, eine Breite und Höhe von 100 hat und meine Seitenlinienbreite 10 Pixel beträgt, wie groß ist dann die Gesamtbreite und -höhe des Rechtecks ​​mit den gezeichneten Seiten? Ist es 100 10*2=120?
Wenn die Kante vollständig außerhalb des Pfads gezeichnet wird, beträgt sie 120. Aber Canvas ist es nicht. Alle Linien in Canvas haben eine „Mittellinie“, die sich in der absoluten Mitte der Linie befindet. Die Striche der Linie erstrecken sich von der Mittellinie zu beiden 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. Beim Streichen der Leinwandgrafiken wird der Pfad an der Mittellinie der Linie ausgerichtet und dann gestrichen. Wie in Abbildung 2 dargestellt:

Beim Nachzeichnen befindet sich also die Hälfte der Linie außen und die Hälfte innen. Das heißt, die Gesamtbreite des obigen Rechtecks ​​beträgt 100 (10/2)*2, was 110 entspricht.
Aus diesem Grund sind die Ecken oben links abgesplittert. Weil hier niemand malt.
Aber warum sind die restlichen Ecken nicht eingekerbt? Sieht es nicht so aus, als gäbe es in allen vier Ecken Ihres Bildes Lücken?
Das liegt daran, dass ich den Pinsel beim Zeichnen der Linie nicht „angehoben“ habe. Der Pinsel war durchgehend, das heißt, es gab kein moveTo. Wenn Sie es nicht glauben, gehen wir jetzt weiter:

Kopieren Sie den Code

Der Code lautet wie folgt:

ctx.lineTo(200,100);
ctx.moveTo(200,100); //Achtung 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 haben uns vor dem Zeichnen der zweiten Linie bewegt und die Koordinaten von moveTo haben sich nicht geändert. Es war immer noch derselbe Punkt, aber nach dem Aktualisieren sah das Diagramm so aus [. Bild 3]:

Verstanden? Weil wir den Stift erhoben haben. Jetzt löschen wir moveTo und machen uns keine Gedanken mehr darüber, wie wir die fehlende Ecke in der oberen linken Ecke füllen können.

Lassen Sie mich zunächst eine Frage stellen: Ist unser Weg verschlossen? Ist das nicht Unsinn? Haben wir den Weg zurück zum ursprünglichen Punkt nicht bereits zurückgelegt? Natürlich ist es geschlossen!
Falsch! Dadurch fällt nur der letzte Punkt des Pfades mit dem Startpunkt zusammen, der Pfad selbst ist jedoch nicht geschlossen!
Wie schließe ich den Pfad in Canvas? Verwenden Sie closePath().

Kopieren Sie den Code

Der Code lautet wie folgt:

ctx.moveTo( 100,100);

ctx.lineTo(200,100);

ctx.lineTo(100,100);
ctx.closePath( );//Geschlossener Pfad
ctx.lineWidth = 10;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)';
ctx.Stroke(); >

Aktualisieren Sie es zu diesem Zeitpunkt und es wird ein perfektes Quadrat sein. Abbildung 4:

Egal wie dick wir die Linien machen – je dicker die Linien, desto mehr Leute mögen sie, oder? ————Die vier Ecken dieses Quadrats sind regelmäßige rechte Winkel und werden nicht abgerundet. Was ist mit den abgerundeten Ecken? Schauen Sie sich bitte den quadratischen Strich in PS an, Abbildung 5:

Wie Sie sehen können, ist der Bogen seiner Ecken umso größer, je dicker die Kante ist.
Wenn ich möchte, dass die Kanten in Canvas mit denen in PS übereinstimmen, gibt es eine Möglichkeit? Natürlich ist es das lineJoin-Attribut.
lineJoin, was den Schnittpunkt von Linien bedeutet, hat drei Attribute: Mitre (Standard, scharfe Ecke), Bevel (Bevel), Round (abgerundete Ecke), wie in Abbildung 6 gezeigt:

Dort Zweifellos können wir sofort verstehen, dass unser Rechteck scharfe Ecken hat. Versuchen Sie also, es in abgerundete Ecken umzuwandeln:
Die Grafik sieht so aus, Abbildung 7:

Ein bisschen wie PS , Rechts?
Außerdem wissen wir aus dem vorherigen Bild, dass die Enden der Canvas-Linien flach sind. Kann das geändert werden? Schließlich ist es flach und sieht nicht gut aus.
ist ebenfalls möglich, also das lineCap-Attribut, das den Endpunkt der Linie definiert. lineCap hat 3 Werte: butt (flach, Standard), rund (Kreis), quadratisch (Quadrat), wie in Abbildung 8 gezeigt

Sie können anhand des Bildes herausfinden, dass es sich tatsächlich um einen flachen Kopf handelt und der quadratische Kopf sind gleich. Der einzige Unterschied besteht darin, dass der flache Kopf nicht so stark hervorsteht. Sowohl der runde Kopf als auch der quadratische Kopf ragen eine Weile heraus. Wie lang ist dieser Abschnitt? Das ist die halbe Breite der Linie.
Haben Sie an etwas gedacht? Haha, für das vorherige Problem mit geschlossenen Pfaden ist der Effekt derselbe, wenn wir lineCap auf einen quadratischen Kopf setzen!
Aber aus Sicherheitsgründen müssen wir den Weg trotzdem sperren, denken Sie daran!
Ich möchte Sie auch daran erinnern: Ein geschlossener Pfad hat keine Endpunkte! Daher ist der Endpunktstil auf einem geschlossenen Pfad nicht sichtbar.
Außerdem: lineCap ist lineJoin etwas ähnlich, achten Sie darauf, sie nicht zu verwechseln.
Wenn Sie ein scharfes Auge haben und Pech haben, stellen Sie möglicherweise fest, dass die 1-Pixel-Linie manchmal nicht 1 Pixel breit ist, sondern breiter und verschwommen erscheint. Wie in Abbildung 9 gezeigt:

Herzlichen Glückwunsch! Sie sind auf einen Fehler gestoßen, der kein Fehler ist. Das ist etwas ganz Besonderes. Darüber werde ich im nächsten Artikel sprechen.