Spisie treści
Dzięki różnym metodom rysowania widocznym w płótno Możliwe jest zdefiniowanie w nich obszarów do narysowania, choć jest to trochę bardziej skomplikowane, jest to całkowicie wykonalne, jednak mamy również możliwość osiągnięcia tego samego wyniku za pomocą metody clip().Kolejny aspekt, który można również włączyć do płótno to rysunek tekstowy, może myślimy, że za pomocą CSS i innych elementów możemy narysować tekst, który jest taki sam lub lepiej wyglądający, jednak będąc w płótno pozwala nam zastosować natywne animacje w HTML5.
Metoda klipu
Jak wspomnieliśmy na początku, metoda ta upraszcza drogę do: jak możemy stworzyć sekcję w kanwie?, aby móc wprowadzić inne rysowane elementy, takie jak nowy rysunek lub wypełnić go określonym kolorem.
Aby użyć tego narzędzia, musimy wywołać metodę spinacz (), to, co robi ta metoda, to utworzenie regionu obrzynek lub nową sekcję, zobaczmy w poniższym kodzie, jak to działa:
Przykład Twoja przeglądarka nie obsługuje elementu płótno W tym kodzie najpierw rysujemy duży prostokąt na żółto, a następnie tworzymy w nim nowy region za pomocą klip () metoda a w tym regionie generujemy nowy czerwony prostokąt.
Zobaczmy, jak to wygląda w naszej przeglądarce:
Możemy również narysować tekst w kanwie, do tego mamy następujące metody:
fillText (, x, y, szerokość): Rysuje i wypełnia tekst określony w pierwszym parametrze na pozycji (x, y). Również jego argument szerokość jest opcjonalny, ale kiedy jest zadeklarowany, określa limit szerokości tekstu.
strokeText (, x, y, szerokość): Rysuje i pozostawia tekst bez dopełnienia na pozycji (x, y). Podobnie jak poprzednia metoda w opcjonalnym argumencie ogranicza szerokość tekstu.
Zobaczmy następujący przykład, jak użyć tych metod do narysowania tekstu na naszym płótnie:
Przykład Twoja przeglądarka nie obsługuje elementu płótno W tym kodzie wykorzystujemy obie metody, aby narysować ten sam tekst, obie w tej samej pozycji, ale innym kolorem, dzięki czemu uzyskujemy efekt obramowania zewnętrznego jednego koloru i wypełnienia innym kolorem, dzięki temu możemy ustalić bardziej wyraźna różnica między wypełnijTekst Tak obrys tekstu.
Na koniec i na zakończenie tego samouczka zobaczmy, jak wygląda w przeglądarce.
