Die Funktion von beginPath ist sehr einfach: Sie dient zum Starten eines neuen Pfads, ist jedoch bei der Verwendung von Leinwandzeichnungen sehr wichtig.
Schauen wir uns zunächst einen kleinen Codeausschnitt an:
var ctx=document.getElementById(2d); ctx.rect(150,150,100,100); ctx.fill(0,0,100,100); .fillStyle=gelb; ctx.fill();
Unser Code hat keine Fehler, aber wir erhalten zwei gelbe Quadrate mit einer Seitenlänge von 100 Pixeln anstelle eines grünen und eines gelben. Warum ist das so?
Tatsächlich zeichnen die Zeichenmethoden (Fill, Stoke) in Canvas alle Pfade nach dem letzten beginPath. Im obigen Code ist das erste Rechteck zweimal gefüllt, das erste Mal ist es grün und das zweite Mal ist es gelb, also zwei gelbe Rechtecke Ebenso werden sie für das Zeichnen von Liniensegmenten oder anderen Kurven oder Grafiken erhalten, unabhängig davon, wohin Sie sich bewegen: Solange Sie keinen Anfangspfad haben, zeichnen Sie einen Pfad.
Wenn die von Ihnen gezeichneten Grafiken nicht Ihren Vorstellungen entsprechen, denken Sie daran, beginPath zu überprüfen.
Wenn wir über beginPath sprechen, müssen wir closePath erwähnen. Tatsächlich bedeutet closePath, dass es den Pfad schließt und nicht den Endpunkt des Pfads mit dem Startpunkt verbindet , nicht um einen neuen Weg einzuschlagen.
Wir fügen nach dem ersten Ausfüllen des obigen Codes einen closePath hinzu und erhalten immer noch zwei gelbe Rechtecke.
Wenn wir jedoch später einen beginPath hinzufügen, erhalten wir zwei Rechtecke unterschiedlicher Farbe.
Zusammenfassend lässt sich sagen, dass Sie nicht versuchen, einen neuen Pfad zu beginnen, indem Sie einen Abschnitt des Pfads schließen. Wenn Sie den Pfad nicht schließen, wird er nicht geschlossen, selbst wenn Sie einen neuen Pfad beginnen.
Ergänzung: Beginpath und Closepath von Canvas verstehenbeginPath()-Methode
var ctx = document. ;ctx.moveTo(100.5, 40.5); ctx. lineTo (200,5, 40,5) ctx.
Der Wert 0,5 dient dazu, verschwommene Linien zu vermeiden. Welche Art von Grafik erhält der obige Code? Ist es eine schwarze und eine rote Linie?
Aus Code-Sicht gibt es kein Problem mit unserer Logik, aber das Ergebnis ist, dass wir zwei rote Linien erhalten, nicht eine schwarze und eine rote.
Wenn Sie verstehen, warum das so ist, müssen Sie den Rest nicht lesen. Das ist die Bedeutung von beginPath.
Die Zeichenmethoden im Canvas (z. B. Strich, Füllung) zeichnen basierend auf allen Pfaden nach dem letzten beginPath. Im obigen Code habe ich beispielsweise zweimal gestrichelt. Tatsächlich basierten diese beiden Striche auf allen Pfaden nach dem ersten beginPath. Das heißt, wir haben den ersten Pfad zweimal gestrichen. Der erste Strich war schwarz und der zweite Strich war rot, also war er am Ende auch rot.
1. Egal, wo Sie moveTo verwenden, um den Pinsel zu bewegen, solange Sie nicht beginPath verwenden, zeichnen Sie immer einen Pfad.
2. Funktionen wie fillRect und StrokeRect, die unabhängige Bereiche direkt zeichnen, unterbrechen den aktuellen Pfad nicht.
Wenn sich die von Ihnen gezeichneten Grafiken von Ihren Vorstellungen unterscheiden, denken Sie daran, zu prüfen, ob es einen angemessenen beginPath gibt.
-------
Apropos beginPath: Sind die beiden eng miteinander verbunden? Die Antwort ist fast nichts.
closePath bedeutet nicht, den Pfad zu beenden, sondern den Pfad zu schließen. Es wird versucht, einen Pfad vom Ende des aktuellen Pfads zum Startpunkt zu verbinden, um den gesamten Pfad zu schließen. Dies bedeutet jedoch nicht, dass der Pfad danach der neue Pfad ist!
Wir fügen closePath nach der ersten ZeileTo im obigen Code hinzu und stellen fest, dass wir immer noch zwei rote Linien erhalten.
Wenn wir jedoch nach dem ersten Strich beginPath hinzufügen, erhalten wir wie erwartet eine schwarze und eine rote Linie.
ctx. Stroke ( ); ctx. beginPath ( ); ctx. moveTo (100.5, 40.5) ctx.
Zusammenfassend lässt sich sagen, dass Sie nicht versuchen, einen neuen Pfad zu beginnen, indem Sie einen vorhandenen Pfad schließen. Wenn Sie einen neuen Pfad beginnen, wird der vorherige Pfad nicht geschlossen.