HTML5 -Leinwand -Zeichnungs -Tutorial (8) - BezierCurveto -Methode zum Zeichnen von Kurven in Leinwand

Im vorherigen Artikel habe ich über drei Möglichkeiten gesprochen, Kurven in Canvas zu zeichnen: Arc, Arcto und quadratische Curveto. Sie alle haben eines gemeinsam, das heißt, die Kurven, die sie zeichnen, können nur auf einer Seite voreingenommen sein. Der größte Unterschied zwischen Beziercurveto, das heute erwähnt wurde, und sie sind, dass sie zwei Kontrollpunkte haben, dh sie können eine S-förmige Kurve zeichnen.

BezierCurveto, die sogenannte Bezier-Kurve, wenn Sie einige Zeichenwerkzeuge gelernt haben, können Sie sie sofort verstehen.

ctx.bezierCurveto (x1, y1, x2, y2, x, y); Ich werde seine Parameter wie gewohnt erklären. (x1, y1) ist die Koordinate des Kontrollpunkts 1 (x2, y2) ist die Koordinate des Kontrollpunkts 2 und (x, y) ist die Koordinate seines Endpunkts. Wie quadratischcurveto werden auch seine Ausgangspunktkoordinaten von Moveto voreingestellt.

Daher erfordert BezierCurveto eine Kurve 4 Punkte: Ausgangspunkt, Endpunkt, Kontrollpunkt 1, Kontrollpunkt 2. Für die nachfolgende Erklärung gehe ich hier davon aus

Hier erwähnen wir das alte Problem der Zeichnung von Leinwand, was bedeutet, dass die Codezeichnung auf Raten basiert und Sie die Zeichnung aktualisieren müssen, um zu verstehen, wo Sie sie zeichnen.

Ich werde die vorherige feine Tradition fortsetzen und einige Hilfslinien zeichnen, um jedem zu helfen, zu verstehen:

var x1 = 450, // die x -Koordinate des Kontrollpunkts 1

y1 = 300, // y des Kontrollpunkts 1

x2 = 450, // x des Kontrollpunkts 2

y2 = 500, // y des Kontrollpunkts 2

x = 300, // Endpunkt x

y = 500; // Endpunkt y

ctx.moveto (300.300); // Startpunkt

ctx.beginPath ();

ctx.linewidth = 5;

ctx.strokestyle = "rgba (0,0,0,1)"

ctx.moveto (300.300);

ctx.bezierCurveto (x1, y1, x2, y2, x, y);

ctx.stroke ();

// Ziehen Sie Hilfslinien mit dem Zeichnen

ctx.beginPath ();

ctx.strokestyle = "RGBA (255,0,0,0,5)";

ctx.linewidth = 1;

// Verbinden Sie den Startpunkt und den Steuerpunkt 1

ctx.moveto (300.300);

ctx.lineto (x1, y1);

// Endpunkt- und Kontrollpunkt 2 verbinden

ctx.moveto (x2, y2);

ctx.lineto (x, y);

// Verbinde die Start- und Endpunkte (Basislinie)

ctx.moveto (300.300);

ctx.lineto (x, y);

ctx.stroke ();

Hier zeichne ich zuerst eine Kurve ähnlich wie quadratischCurveto, die nur zur Seite voreingenommen ist. Diese Linie scheint relativ rund zu sein, da die X -Koordinaten der Kontrollpunkte 1 und 2 gleich sind.

Zeichnen Sie nun eine S-förmige Kurve, um zu beweisen, dass BezierCurveto einzigartig ist:

var x1 = 150;

...

Tatsächlich ändern Sie einfach die Koordinaten des Kontrollpunkts 1. Wenn die Koordinaten des Kontrollpunkts 1 und des Kontrollpunkts 2 auf beiden Seiten der Grundlinie sind, wird eine S-förmige Kurve gezogen. Wenn sich beide auf einer Seite der Basislinie befinden, ist dies ein Effekt, der dem quadratischen Curveto ähnelt.

Die Situation dieses Beispiels ist relativ einfach. Die Basislinie (Ausgangspunkt zu Endpunkt) ist vertikal, aber in der tatsächlichen Anwendung ist unsere Basislinie in den meisten Fällen schräg, sodass die Situation viel komplizierter ist. Aber versuchen wir es selbst

Jede Zeichnungsmethode sieht in der Funktion relativ einzeln aus, aber die leistungsstarke Methode wird durch eine einzelne Methode kombiniert. Im nachfolgenden Artikel habe ich versucht, einige gängige Zeichenmethoden wie abgerundete Rechtecke und Ellipsen zu erklären. Sie mussten diese einzelnen Methoden in der Vergangenheit kombinieren.