Spisie treści
Rysowanie krzywych na płótnie może być proste lub złożone, wszystko zależy od tego, co chcesz osiągnąć, możesz wykonać kilka ciekawych efektów, które moglibyśmy wykorzystać do zbudowania niektórych funkcjonalności na naszej stronie, które wyróżniają się na tle pozostałych wykonanych stron w HTML5.Jedną z rzeczy, które możemy zrobić, jest zaawansowana obsługa tworzenia zakrzywionych linii, dzięki tego typu narzędziom będziemy bliżsi braku ograniczeń, gdy myślimy o tym, co może zrobić nasza strona.
Rysuj krzywą podczas poruszania myszą
Ten przypadek jest o tyle ciekawy, że rysujemy krzywą podczas poruszania myszą, dodatkowo jeśli naciśniemy dowolny klawisz na klawiaturze, niektóre punkty krzywej się zmienią.
Na przykład, jeśli naciśniemy klawisz Ctrl, pierwszy punkt, który reprezentuje koniec ścieżka podrzędna, jeśli naciśniemy klawisz Shift, przesunie się drugi punkt, czyli dwa pierwsze argumenty metody łukDo () i wreszcie, jeśli nie naciśniemy żadnego klawisza, przesunie się trzeci punkt reprezentowany przez ostatnie dwa argumenty metody.
Zobaczmy poniżej kod, za pomocą którego osiągamy te efekty:
Przykład Twoja przeglądarka nie obsługuje elementu płótno Jak widać, najpierw w kodzie definiujemy handler odbioru zdarzeń klawiszy, które wciskamy, w nim ustalamy wartości, które należy przyjąć.
Zobaczmy poniżej zrzut ekranu pokazujący, w jaki sposób może to spowodować w naszej przeglądarce. Ważne jest, aby wspomnieć, że dynamiczne wyniki mogą się różnić podczas odtwarzania tego przykładu:
Wcześniej używaliśmy tylko tej metody łukDo ()Teraz zobaczymy, jak działa metoda arc(), jej obsługa jest łatwiejsza, ponieważ określamy punkt na płótnie przez pierwsze dwa argumenty, a następnie promień i kąt krzywej.
Zobaczmy następujący przykład, jak narysować trzy rodzaje krzywych tą metodą:
Przykład Twoja przeglądarka nie obsługuje elementu płótno Zobaczmy teraz, jak to wygląda w naszej przeglądarce:
