Inhaltsverzeichnis
Das Zeichnen von Kurven auf einer Leinwand kann einfach oder komplex sein. Es hängt alles davon ab, was Sie erreichen möchten. Sie können einige interessante Effekte erzielen, mit denen wir einige Funktionen auf unserer Seite erstellen könnten, die sich von den anderen erstellten Seiten abheben In HTML5.Eines der Dinge, die wir tun können, ist, die Erstellung von gebogenen Linien zu verbessern. Mit dieser Art von Werkzeugen werden wir näher daran sein, keine Einschränkungen zu haben, wenn wir darüber nachdenken, was unsere Seite tun kann.
Zeichnen Sie eine Kurve, wenn Sie die Maus bewegen
Dieser Fall ist sehr interessant, da wir beim Bewegen der Maus eine Kurve zeichnen, zusätzlich ändern sich einige Punkte der Kurve, wenn wir eine beliebige Taste auf unserer Tastatur drücken.
Wenn wir zum Beispiel die Strg-Taste drücken, wird der erste Punkt, der das Ende des Unterpfad, wenn wir die Umschalttaste drücken, verschiebt sich der zweite Punkt, die ersten beiden Argumente der Methode arcTo () und schließlich, wenn wir keine Taste drücken, verschiebt sich der dritte Punkt, der durch die letzten beiden Argumente der Methode repräsentiert wird.
Sehen wir uns unten den Code an, mit dem wir diese Effekte erzielen:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch Wie wir sehen können, definieren wir zuerst im Code den Handler für den Empfang von Ereignissen der Tasten, die wir drücken, und legen darin die Werte fest, die genommen werden müssen.
Sehen wir uns unten einen Screenshot an, wie dies in unserem Browser resultieren könnte. Es ist wichtig zu erwähnen, dass die Ergebnisse bei der Wiedergabe dieses Beispiels variieren können, da sie dynamisch sind:
Zuvor hatten wir nur die Methode verwendet arcTo ()Jetzt werden wir sehen, wie die Methode arc() funktioniert, ihre Handhabung ist einfacher, da wir einen Punkt auf der Leinwand durch die ersten beiden Argumente und dann den Radius und den Winkel der Kurve angeben.
Sehen wir uns das folgende Beispiel an, wie Sie mit dieser Methode drei Arten von Kurven zeichnen:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch Sehen wir uns nun an, wie das in unserem Browser aussieht:
