HTML5 - Canvas, Arc verwenden

Inhaltsverzeichnis
Grundsätzlich bestehen alle Figuren aus Linien und Kurven, in vielen Fällen können wir Kurven mit sehr kurzen Linien und in großer Zahl simulieren, dies ist jedoch sehr komplex und mit außergewöhnlichem Aufwand verbunden, HTML5 und seine Praktikabilität bieten uns die Lichtbogenmethode Mit denen wir geschwungene Linien entwickeln und unsere Zeichnungen in gewisser Weise ergänzen können.
Lichtbogenmethode
Wie eingangs erwähnt, können wir mit dieser Methode geschwungene Linien innerhalb des Elements erzeugen Segeltuch ohne größere Komplexität, ohne dass komplexe mathematische Formeln eingeführt werden müssen, wie dies in einigen Programmiersprachen möglicherweise erforderlich ist.
Bevor wir sehen, wie diese Methode funktioniert, müssen wir ihre Eigenschaften und Eigenschaften kennen. Wir werden sie unten in der folgenden Liste sehen:
  • Bogen (x, y, rad, Startwinkel, Endwinkel, Richtung): Diese Methode zeichnet eine Kurve an den Koordinaten (x, y) mit einem Radius rad, der Startwinkel ist Anfangswinkel und das Ende des Winkels ist WinkelFinal. Wir haben einen optionalen Parameter, der ist die Anschrift und gibt die Richtung an, die die von der Methode gezeichnete Kurve nehmen wird.
  • arcTo (x1, y1, x2, y2, rad): Diese Methode ermöglicht es uns, eine Kurve zu den Koordinaten (x2, y2) zu zeichnen, die die Koordinaten (x1, y1) passiert und einen Radius hat rad.

Wie wir sehen, haben wir zwei grundlegende Methoden, die uns alles ermöglichen, um die geschwungenen Linien in unserem zeichnen zu können Leinwandelement, jetzt sehen wir uns einen kleinen Code an, damit wir zeigen können, wie wir das gerade Gesehene in die Praxis umsetzen können:
 Beispiel Ihr Browser unterstützt das . nicht Segeltuch Element 

Wir haben die gekrümmte Linie im Beispiel mit der Methode arcTo () die wir zuvor beschrieben haben, um diese Kurve zu zeichnen, sind wir von zwei Linien abhängig, die erste wird vom Ende des letzten Teilpfads bis zu dem durch die ersten beiden Methodenargumente beschriebenen Punkt gezogen und die zweite Linie wird von dem durch beschriebenen Punkt gezogen die ersten beiden Argumente bis zu dem Punkt, der durch das dritte und vierte Argument beschrieben wird.
Schließlich wird die Kurve als kürzeste Linie zwischen dem letzten Teilpfad und dem zweiten Punkt gezeichnet, der eine Kreiskurve mit dem durch das letzte Argument angegebenen Radius beschreibt, damit wir sehen können, was wir meinen, der Code enthält einige Zeilen von Hinweis in rot. Sehen wir uns unten ein Bild davon an, wie dies in unserem Browser aussieht:

Sobald der Betrieb von Bogen Um geschwungene Linien zu zeichnen, können wir dieses Tutorial beenden, wir haben bereits ein neues Werkzeug, mit dem wir mehr aus dem Canvas-Element extrahieren und somit seine Funktionalität viel erweitern können.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
wave wave wave wave wave