Spisie treści
Podczas korzystania z przedmiotu płótno rysować nie ograniczamy się do rysowania figur prostokątnych, możemy też rysować za pomocą współrzędnych i tzw ścieżki jakimi ścieżkami wskażemy element? płótno gdzie i jak pokazać nasz rysunek.Możliwości, jakie nam to daje, są imponujące, ponieważ za pomocą niezbędnych algorytmów możemy tworzyć nieograniczone kompozycje, narysować dowolny rodzaj figury HTML5 a wraz z nim aż do osiągnięcia w połączeniu z innymi elementami rezultatów, których nie wyobrażano sobie w poprzednich specyfikacjach języka.
Korzystanie ze ścieżki
Jak już wspomnieliśmy ścieżka co pozwoli nam wskazać na kanwie współrzędne, według których ma być wykonany rysunek, dzięki tym współrzędnym kanwa będzie mogła wiedzieć, gdzie narysować odpowiednie linie i w końcu przy prawidłowym nagromadzeniu linii możemy osiągnąć dowolne rodzaj figury.
Zanim przejdziemy do odpowiednich przykładów, musimy wiedzieć, jakie metody są dostępne dla elementu canvas i ścieżki, zobaczmy poniższą listę:
- początkowa ścieżka (): Ta metoda pozwala nam rozpocząć nową ścieżkę.
- closeŚcieżka (): Ta metoda próbuje zamknąć bieżącą ścieżkę, rysując linię od końca ostatniej linii do początkowych współrzędnych.
- wypełnić (): Wypełnij formularze opisane w podścieżkach.
- isPointInPath (x, y): Zwraca true, jeśli określony punkt jest zawarty w kształcie narysowanym przez bieżącą ścieżkę.
- wierszDo (x, y): Narysuj podścieżkę o określonych współrzędnych.
- moveTo (x, y): Pozwala nam przenieść się do określonych współrzędnych bez konieczności rysowania podścieżki.
- prostokąt (x, y, w, h): Narysuj prostokąt, którego współrzędne w lewym górnym rogu odpowiadają (x, y), jego szerokość odpowiada w, a wysokość h.
- udar (): Narysuj zewnętrzne linie kształtów narysowanych przez podścieżkę.
• Nazywamy metodę początkowa ścieżka.
• Przechodzimy do pozycji wyjściowej metodą przenieś do.
• Rysujemy podścieżki metodami liniaToitp.
• Opcjonalnie możemy wywołać metodę closePath.
• Na koniec nazywamy metody wypełnić lub palić w piecu.
Mamy już zalecaną kolejność rozpoczęcia rysowania, teraz widzimy odpowiedni kod w HTML5.
Przykład Twoja przeglądarka nie obsługuje elementu płótno Jak widać, wykonywane są dwa telefony do początkowa ścieżka(), dzięki temu możemy rozpocząć rysowanie obszarów na płótnie, następnie za pomocą moveTo() ustalamy pozycje początkowe, a reszta to rysowanie.
Zobaczmy jak wygląda nasz rysunek w przeglądarce:
