Beispielanalyse der Rolle von beginPath() und closePath() im Canvas

Dieser Artikel bietet Ihnen eine Beispielanalyse der Funktionen von beginPath() und closePath() in Canvas. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Die Funktion von beginPath ist sehr einfach, sie besteht darin, einen neuen Pfad zu beginnen, aber sie ist im Prozess der Verwendung von Leinwandzeichnungen sehr wichtig

Schauen wir uns zunächst einen kleinen Codeabschnitt an:

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    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 wird das erste Rechteck zweimal gefüllt, das erste Mal grün, gelb für Beim zweiten Mal erhalten wir also zwei gelbe Rechtecke. Dasselbe gilt für das Zeichnen von Liniensegmenten oder anderen Kurven oder Grafiken, egal wohin Sie sich bewegen, solange Sie keinen Anfangspfad haben, zeichnen Sie einen Pfad.

Wenn die von Ihnen gezeichneten Grafiken nicht mit Ihren Vorstellungen übereinstimmen, denken Sie daran, beginPath zu überprüfen.

Wenn wir über beginPath sprechen, müssen wir closePath erwähnen. Tatsächlich haben die beiden nichts miteinander zu tun other. closePath bedeutet close Der Pfad ist nicht das Ende des Pfades. Er verbindet lediglich den Endpunkt des Pfades mit dem Startpunkt, anstatt einen neuen Pfad zu beginnen.

Wir fügen nach dem ersten Ausfüllen des obigen Codes einen closePath hinzu und erhalten immer noch zwei gelbe Rechtecke.

Aber wenn wir am Ende einen beginPath hinzufügen, erhalten wir zwei Rechtecke unterschiedlicher Farbe.

Zusammenfassend lässt sich sagen: Versuchen Sie nicht, 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 .

Das obige ist der detaillierte Inhalt vonBeispielanalyse der Rolle von beginPath() und closePath() im Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!