Spisie treści
Element Płótno Jest to jedna z najbardziej oczekiwanych nowości, jakie ma HTML5 Ponieważ jest to poważna alternatywa dla wtyczki Adobe Flash, dzięki jej natywnym możliwościom i nieuzależnieniu od zewnętrznej biblioteki, zyskujemy bezpośrednio stabilność i wsparcie przeglądarki w przypadku problemów z implementacją standardu HTML5 .Element Płótno pozwala nam wytyczyć obszar w naszych dokumentach HTML5 gdzie możemy rysować, a nawet dodawać efekty i ruchy za pomocą JavaScript.
Płótno element
Zanim zaczniesz pracować z przedmiotem Płótno, zdefiniujemy jego podstawowe cechy, mamy, że jest to element przepływu, jest całkowicie nowy w HTML5, jego atrybuty to wysokość dla jego wysokości i szerokość dla jego szerokości.
Zobaczmy poniżej mały przykład tego, jak możemy zdefiniować płótno w naszym dokumencie:
Przykład Twoja przeglądarka nie obsługuje elementu płótno Zobaczmy szybko, co dzieje się w przykładzie; najpierw definiujemy styl, w którym przypisujemy nieco grubą ramkę, aby móc odróżnić nasze Płótno pusty, następnie uruchamiamy element Canvas z jego etykietą otwierającą i definiujemy jego atrybuty wysokości i szerokości, wewnątrz etykiet umieszczamy komunikat w przypadku otwarcia dokumentu w przeglądarce nieobsługującej tej specyfikacji standardu.
Zobaczmy teraz, jak ten kod, który właśnie wyjaśniliśmy, wygląda w naszej przeglądarce:
Nasz pierwszy rysunek
Jak wspomnieliśmy na początku samouczka, aby rysować i wykonywać akcje w Canvas musimy użyć Javascript, do tego użyjemy metody zwanej getContext () to umieszcza nas w kontekście Płótna i dzięki niemu możemy mu powiedzieć, co pokazać.
Możemy rysować figury zarówno w 2D, jak i 3D, w tym przypadku przekazujemy w przypadku pierwszego argument "2d".
Spójrzmy na poniższy przykład, aby lepiej zdefiniować to, co wyjaśniamy:
Przykład Twoja przeglądarka nie obsługuje elementu płótno Tutaj po prostu zrobiliśmy zdefiniowanie zmiennej ctx do którego zamierzamy przypisać obiekt dokument a ten ostatni wywoła metodę getContext i zastosuj go na elemencie Canvas; to mamy, że zmienna ctx wywołuje metodę o nazwie wypełnićRect i do tego podajemy jakieś współrzędne, jeśli przyjrzymy się uważnie to podajemy 4 strony, zobaczmy, że narysował to w przeglądarce:
