HTML5 zawiera ekscytujący element zwany CANVAS. Ma wiele zastosowań, ale aby z niego korzystać, musisz nauczyć się trochę JavaScript, HTML, i czasami CSS.
To sprawia, że element CANVAS jest nieco zniechęcający dla wielu projektantów, a większość prawdopodobnie zignoruje element, dopóki nie pojawią się niezawodne narzędzia do tworzenia animacji i gier CANVAS bez wiedzy JavaScript.
Do czego służy płótno HTML5
Element HTML5 CANVAS może być używany do wielu rzeczy, które wcześniej trzeba było użyć wbudowanej aplikacji, takiej jak Flash, aby wygenerować:
- Dynamiczna grafika
- Gry online i offline
- Animacje
- Interaktywne wideo i audio
W rzeczywistości głównym powodem, dla którego ludzie używają elementu CANVAS, jest łatwość przekształcenia zwykłej strony internetowej w dynamiczną aplikację internetową, a następnie przekonwertuj ją na aplikację mobilną do użytku na smartfonach i tabletki.
Jeśli mamy Flash, po co nam płótno?
Według Specyfikacja HTML5, element CANVAS to: „...zależne od rozdzielczości płótno bitmapowe, którego można używać do renderowania wykresów, grafiki z gier, grafiki lub innych obrazów wizualnych w locie”.
Element CANVAS umożliwia rysowanie wykresów, grafik, gier, grafik i innych elementów wizualnych bezpośrednio na stronie internetowej w czasie rzeczywistym.
Być może myślisz, że możemy już to zrobić za pomocą Flasha, ale istnieją dwie główne różnice między CANVAS i Flash:
- Element CANVAS jest osadzony bezpośrednio w kodzie HTML. Skrypty, które z niego korzystają, znajdują się w kodzie HTML lub w połączonym pliku zewnętrznym. Oznacza to, że element CANVAS jest częścią modelu obiektów dokumentu (DOM).
- Flash to osadzony plik zewnętrzny. Do wyświetlania używa elementu EMBED lub OBJECT i nie może wchodzić w bezpośrednią interakcję z innymi elementami HTML. Ponieważ element CANVAS jest częścią DOM, może wchodzić w interakcje z DOM na wiele sposobów.
- Na przykład możesz utworzyć animację, która zmienia się, gdy inna część strony wchodzi w interakcję — na przykład wypełniany element formularza. Korzystając z Flasha, jedyne, co możesz zrobić, to rozpocząć Film Flash lub animację, ale dzięki CANVAS można stworzyć wiele różnych efektów, nawet dodając tekst z pola formularza do animacji.
- Element CANVAS jest natywnie obsługiwany przez przeglądarki internetowe. Aby użytkownicy mogli faktycznie korzystać z Flasha, ich przeglądarka musi mieć zainstalowaną wtyczkę. Jest to często kłopotliwe dla większości ludzi z powodu nieaktualnych instalacji Flasha lub faktu, że ich system operacyjny po prostu go nie obsługuje.
- Kiedyś każda przeglądarka miała zainstalowaną wtyczkę, ale tak już nie jest, a wielu z nich nawet usuwa wtyczkę z powodu trudności. Poza tym nie jest dostępny nawet w popularnych Platforma iOS.
Płótno jest przydatne, nawet jeśli nigdy nie planowałeś używać Flash
Jednym z głównych powodów, dla których element CANVAS jest tak zagmatwany, jest to, że wielu projektantów przyzwyczaiło się do całkowicie statycznej sieci. Obrazy mogą być animowane, ale wystarczy GIF, i oczywiście możesz osadzić wideo na stronach, ale znowu jest to statyczne wideo, które po prostu znajduje się na stronie i może zaczyna się lub zatrzymuje z powodu interakcji, ale to wszystko.
Element CANVAS pozwala dodać o wiele więcej interaktywności do Twoich stron internetowych, ponieważ teraz możesz dynamicznie kontrolować grafikę, obrazy i tekst za pomocą języka skryptowego. Element CANVAS pomaga przekształcać obrazy, zdjęcia, wykresy i wykresy w elementy animowane.
Kiedy rozważyć użycie elementu Canvas?
Twoi odbiorcy powinni być Twoją pierwszą kwestią przy podejmowaniu decyzji, czy użyć elementu CANVAS.
Jeśli Twoi odbiorcy używają przede wszystkim Windows XP i IE 6, 7 lub 8, wtedy tworzenie funkcji dynamicznego płótna będzie bezcelowe, ponieważ te przeglądarki jej nie obsługują.
Jeśli tworzysz aplikację, która będzie używana tylko na komputerach z systemem Windows, Flash może być najlepszym rozwiązaniem. Aplikacja do użytku na komputerach z systemem Windows i Mac może skorzystać z aplikacji Silverlight.
Jeśli jednak Twoja aplikacja musi być przeglądana na urządzeniach mobilnych (zarówno Android, jak i iOS) oraz na nowoczesnych komputery stacjonarne (zaktualizowane do najnowszych wersji przeglądarek), wtedy dobrym wyborem jest użycie elementu CANVAS.
Należy pamiętać, że użycie tego elementu pozwala mieć opcje awaryjne, takie jak statyczne obrazy, dla starszych przeglądarek, które go nie obsługują.
Jednak nie zaleca się używania kanwy HTML5 do wszystkiego. Powinieneś nigdy używaj go do takich rzeczy jak logo, nagłówek lub nawigacja (chociaż użycie go do animowania części któregokolwiek z nich byłoby w porządku).
Zgodnie ze specyfikacją powinieneś używać elementów, które najlepiej pasują do tego, co chcesz zbudować. Dlatego używanie elementu HEADER wraz z obrazami i tekstem jest lepsze niż element CANVAS w nagłówku i logo.
Ponadto, jeśli tworzysz Strona internetowa lub aplikacji, która ma być używana na nośniku nieinteraktywnym, takim jak drukowanie, należy pamiętać, że dynamicznie aktualizowany element CANVAS może nie być drukowany zgodnie z oczekiwaniami. Możesz otrzymać wydruk bieżącej zawartości lub zawartości zastępczej.