Canvas-Lernzusammenfassung Drei: Pfade zeichnen – Liniensegmente

Einige Zeichenmethoden in der Canvas-Zeichenumgebung sind unmittelbare Zeichenmethoden und einige Zeichenmethoden sind pfadbasiert.

Es gibt nur zwei Methoden zum sofortigen Zeichnen von Grafiken: StrokeRect() und FillRect(). Obwohl die Methoden StrokezText() und FillText() ebenfalls sofort gezeichnet werden, wird Text nicht als Grafik betrachtet.

Die meisten Zeichensysteme wie SVG (Scalable Verctor Graphics, skalierbare Vektorgrafiken), Adobe Illustrator usw. basieren auf Pfaden.

Wenn Sie diese Zeichensysteme verwenden, müssen Sie zuerst einen Pfad definieren und ihn dann streichen oder füllen, oder Sie können ihn streichen und füllen, damit die Form angezeigt werden kann.

Drei Zeichenmethoden in Canvas:

In der Canvas-Zeichenumgebung werden Liniensegmente auch auf der Grundlage von Pfaden gezeichnet, die als lineare Pfade bezeichnet werden. Die Methoden zum Erstellen linearer Pfade sind: moveTO() und lineTo() Nur durch Aufrufen der Stroke()-Methode nach dem Erstellen des Pfades kann die Linie erstellt werden Segmente können in Canvas gezeichnet werden.

Dies ist die zuvor erwähnte pfadbasierte Zeichenmethode, die gestrichelt oder gefüllt werden muss.

Normalerweise sind zwei Punkte durch eine Linie verbunden, daher ist das Zeichnen eines Liniensegments sehr einfach. Geben Sie den Startpunkt der Linie über moveTO() an und bewegen Sie sich über lineTo() zu einem anderen Punkt.

 Funktion drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

Allerdings können wir die Liniensegmente in der Leinwand nicht sehen. Wir haben bereits erwähnt, dass die pfadbasierte Zeichenmethode gestrichelt oder gefüllt sein muss. Um das Ergebnis zu sehen, müssen wir also auch die Methode Stroke() verwenden.

Daher ändern wir die Methode wie folgt, sodass ein Liniensegment gezeichnet wird

 function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);}

Wir können Liniensegmente auch nur mit lineTo() auf der Leinwand zeichnen. Wir ändern den obigen Code wie unten gezeigt, und der Effekt ist derselbe.

 function drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);}

Fassen Sie die Verwendung von moveTo() und lineTo() zusammen

• moveTo(x,y): Verschieben Sie den Strich zu den angegebenen Koordinaten x und y und fügen Sie einen Unterpfad zum aktuellen Pfad hinzu. Diese Methode löscht keine Unterpfade im aktuellen Pfad.
• lineTo(x,y): Zeichnen Sie eine gerade Linie von der aktuellen Position zur angegebenen x- und y-Position. Wenn im aktuellen Pfad keine Unterpfade vorhanden sind, verhält sich diese Methode genauso wie moveTo(). Wenn im aktuellen Pfad ein Unterpfad vorhanden ist, fügt diese Methode den von Ihnen angegebenen Punkt zum Unterpfad hinzu.

Ändern Sie die Breite eines Liniensegments

 function= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);}

 function drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'green'; cxt.lineTo(200, 200);}

Wir können auch das CanvasGradient-Objekt oder das CanvasPattern-Objekt verwenden, um Verlaufsfarben oder Muster zu Liniensegmenten hinzuzufügen.

 function drawLine(){ cxt.lineWidth = 14; var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 0,5, 'lila'); gradient.addColorStop(1, 'gelb'); Farbverlauf; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Anhand der drei Zeichenmethoden in der Leinwand oben können wir erkennen, dass der Bogenpfad in der zweiten Reihe ein offener Pfad und der Bogenpfad in der letzten Reihe ein geschlossener Pfad ist. Wie wird also ein geschlossener Pfad erreicht?

Werfen wir einen Blick auf zwei der wichtigeren Methoden zum Zeichnen von Pfaden auf der Leinwand.

• beginPath(): Alle aktuellen Unterpfade löschen, um den aktuellen Pfad zurückzusetzen und einen Pfad neu zu planen.
• closePath(): wird verwendet, um einen offenen Pfad zu schließen. Dies ist nicht erforderlich, wenn das Diagramm bereits geschlossen ist, d. h. der aktuelle Punkt der Ausgangspunkt ist. Diese Funktion führt keine Aktion aus.

Zeichnen Sie zunächst eine Polylinie

 function drawLine(){ cxt.lineWidth = 2; cxt.lineTo(50, 150); );}

Ändern Sie den Code im obigen Beispiel und fügen Sie dem Code die Methoden beginPath() und closePath() hinzu.

 function drawLine(){ //Stroke Triangle cxt.lineWidth(); cxt.moveTo(50, 150); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.streich(); cxt.closePath();}

Es ist ersichtlich, dass wir zwei Pfade auf der Leinwand gezeichnet haben

Hinweis: Nach dem Aufruf von beginPath() oder beim ersten Erstellen der Leinwand wird der erste Pfadkonstruktionsbefehl normalerweise als moveTo() betrachtet. Daher müssen wir beim Zeichnen von Grafiken zuerst beginPath() verwenden.

Lassen Sie uns unseren Code weiter ändern

 function drawLine(){ //Stroke Triangle cxt.lineWidth(); cxt.moveTo(50, 150); (150, 150); cxt.closePath(); //Polylinie cxt.translate(150, 0); cxt.StrokeStyle = 'red'; cxt.beginPath(); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.stroke(); cxt.closePath(); //Grün gefülltes Dreieck cxt.fillStyle = 'green'; cxt.moveTo(50, 50); .lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //Rot gefülltes Dreieck cxt.translate(150, 0); 50, 50); cxt.lineTo(50, 150); 150); cxt.closePath(); cxt.fill();}

Aus dem obigen Beispiel können wir ersehen, dass sich die unterschiedlichen Positionen von closePath() auch auf unsere Grafiken auswirken.

Hinweis: Wenn Sie die Funktion fill() aufrufen, werden alle nicht geschlossenen Formen automatisch geschlossen, sodass die Funktion closePath() zu diesem Zeitpunkt nicht erforderlich ist.

Aber Aufruf von Stroke(): Wenn Sie closePath() nur vor der Stroke()-Methode verwenden, wird ein geschlossener Pfad gebildet. Wenn Sie die Methode closePath() nach der Stroke()-Methode aufrufen, wurde die Grafik gezeichnet und die aktuelle Der Zeichenpfad wurde geschlossen, daher funktioniert die Methode closePath() nicht.

Schauen wir uns zunächst ein Beispiel an

 function drawLine(){ //Stroke-Dreieck cxt.beginPath(); cxt.moveTo(50, 50); cxt.beginPath( ); ; cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5); cxt.stroke();}

Auf dem Bild können wir erkennen, dass wir die Linienbreite beider Liniensegmente auf 1 Pixel festgelegt haben, das Liniensegment darüber jedoch zwei Pixel zeichnet.

Wenn Sie ein 1 Pixel breites Liniensegment an der Grenze bestimmter 2 Pixel zeichnen, nimmt das Liniensegment tatsächlich eine Breite von 2 Pixeln ein.

Denn wenn Sie ein 1 Pixel breites vertikales Liniensegment an einem Pixelrand zeichnen, versucht das Canvas-Zeichenumgebungsobjekt, ein halbes Pixel rechts von der Mittellinie des Rahmens und das andere halbe Pixel links vom Rand zu zeichnen Mittellinie.

Es ist jedoch nicht möglich, innerhalb eines ganzen Pixels ein Liniensegment mit einer Breite von einem halben Pixel zu zeichnen, daher wird ein halbes Pixel in beide Richtungen auf 1 Pixel erweitert.

Andererseits erfolgt die Zeichnung zwischen zwei Pixeln, sodass sich die halben Pixel auf der linken und rechten Seite der Mittellinie nicht erstrecken und zusammen genau die Breite von 1 Pixel einnehmen. Wenn Sie also ein Liniensegment zeichnen möchten, das wirklich 1 Pixel breit ist, müssen Sie das Liniensegment zwischen zwei Pixeln zeichnen

Nachdem wir nun verstanden haben, wie man ein echtes 1-Pixel-Liniensegment zeichnet, beginnen wir mit dem Zeichnen des Rasters

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.StrokeStyle = 'green'; //Zeichne eine vertikale Linie for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt.Stroke(); moveTo (0, i); cxt.lineTo(cxt.canvas.width, i); }}drawLine(10, 10);

Im obigen Beispiel zeichnen wir das Liniensegment auf dem Pixel zwischen zwei Pixeln, und das gezeichnete Liniensegment ist nur 0,5 Pixel breit.

Obwohl die Canvas-Spezifikation dies nicht explizit vorschreibt, nutzen alle Browser-Canvas-Implementierungen Anti-Aliasing-Technologie, um Zeichnungseffekte für Subpixel-Liniensegmente zu erzeugen.

In diesem Abschnitt wird hauptsächlich die Methode zum Zeichnen linearer Pfade in der Leinwand erläutert. Dabei werden hauptsächlich moveTo() zum Definieren des Startpunkts, lineTo() zum Definieren des Endpunkts und Stroke() zum Zeichnen des aktuellen Pfads verwendet. Diese drei Methoden zeichnen Liniensegmente

Es gibt zwei wichtige Methoden zum Zeichnen von Pfaden im Canvas: beginPath() und closePath(). Der Aufruf von beginPath() vor dem Zeichnen von Grafiken ist ein notwendiger Schritt zum Zeichnen mehrerer Grafiken.

closePath() kann bei Verwendung von fill() weggelassen werden, außerdem muss auf die Aufrufposition der Methode closePath() geachtet werden.

Beim Zeichnen eines Liniensegments können wir lineWidth verwenden, um die Breite des Liniensegments zu ändern, und StrokeStyle, um die Farbe des Liniensegments zu ändern.

Ermitteln Sie die Pixelgrenzen des Liniensegments, damit wir eine echte Linienbreite von 1 Pixel zeichnen können.

Studierende, die sich für das Zeichnen von Grafiken auf Leinwand interessieren, achten bitte weiterhin auf nachfolgende Aktualisierungen. Wenn etwas nicht stimmt, weisen Sie bitte darauf hin und kommunizieren Sie mehr.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.