✅ HTML5 - Bezierkurven | Entwicklung 2024

Inhaltsverzeichnis

Das Bezierkurven, Sie sind eine Art von Kurven, die in Zeichen- und Grafikprogrammen weit verbreitet sind, da sie es uns ermöglichen, Kurven mit einigen Punkten in der Ebene zu erzeugen. Dank dieser mathematischen Formeln können wir glatte oder genauere Kurven erzielen, die wir verwenden können Sie mehr Details zu unseren Diagrammen.
In HTML5 wir haben die möglichkeit die Bezierkurven Dank verschiedener Methoden können wir quadratische und kubische Kurven einbeziehen, die Einschränkung besteht darin, dass wir auf der Leinwand keine visuelle Unterstützung dafür haben, wo wir die Referenzpunkte haben.
Methoden zur Generierung der Kurven
Wie wir bereits erklärt haben, werden die Bezier-Kurven an einigen Punkten unterstützt, um die Zeichnung erstellen zu können. Um die gewünschte Kurve zu erreichen, müssen wir viele Experimente durchführen, jedoch müssen wir zum Experimentieren zuerst den Hintergrund kennen, also als nächstes werden die entsprechenden Informationen mit den Methoden sehen, die es uns ermöglichen, diese Kurven zu zeichnen:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Zeichnen Sie mit den Kontrollpunkten (cx1, cy1) und (cx2, cy2) eine Bezierkurve vom kubischen Typ, an der sich die Punkte (x, y) treffen.
quadraticCurveTo (cx, xy, x, y): Zeichnen Sie mit dem Kontrollpunkt (cx, cy) eine quadratische Bezierkurve zu den Punkten (x, y).
Wir kennen bereits den technischen Aspekt, mit dem wir arbeiten müssen, jetzt werden wir ein Beispiel im Code sehen.
In diesem Beispiel werden wir eine kubische Bezierkurve zeichnen, wobei wir die letzte als Ausgangspunkt nehmen Unterpfad und dann zu den Punkten der letzten beiden Argumente, die die Methode empfängt, enthält sie zusätzlich eine Funktionalität, die beim Drücken der Umschalt- oder Strg-Taste auf unserer Tastatur den Start- und Endpunkt der Kurve ändert.

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch

Sobald wir den Code haben, sehen wir uns an, was er im Browser generiert. Wir begrenzen, dass die Ergebnisse variieren können, da er einen dynamischen Abschnitt enthält:

Wenn wir nachsehen, haben wir die vier Kontrollpunkte, die durch die roten Linien markiert sind, die wir im Screenshot sehen.
Damit beenden wir dieses Tutorial zu Bézier-Kurven. Der Schlüssel ist das Experimentieren, wenn wir komplexere Effekte erzielen möchten, die an das angehängt werden, was wir brauchen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben