Wzory HTML5 na urządzeniach przenośnych

Technologia Canvas może być stosowana do kierowania urządzeń mobilnych jako aplikacje webowe lub jako aplikacje mobilne z wykorzystaniem technologii takich jak Apache Cordova. Pozwala ona na integrację obrazów, audio i wideo, dzięki czemu zakres aplikacji jest szeroki i może obejmować od e-learningu po reklamę i gry. Ponieważ jest domyślnie obsługiwany przez przeglądarkę jako standard HTML5 i nie wymaga żadnych zewnętrznych wtyczek do instalacji, stanowi doskonały wybór dla wszelkich potrzeb interaktywnych.

Technologia Canvas to element HTML5, który może być wykorzystany do rysowania grafiki poprzez skryptowanie w JavaScript. Pozwala również na dodawanie obrazów, wideo, audio i interakcję z kliknięciami zdarzeń. Istnieje od ponad dekady, ale popularność zyskała dopiero niedawno.

Dlaczego warto używać Canvas

W przeciwieństwie do Flash i Silverlight, Canvas jest standardem W3C bez konieczności instalowania dodatkowych wtyczek. Jest taki sam jak HTML, CSS i JavaScript, działający domyślnie w przeglądarce.

  • Interaktywność. Canvas jest w pełni interaktywny poprzez JavaScript. Może reagować na działania użytkownika poprzez odsłuchiwanie zdarzeń z klawiatury, myszy lub dotyku. Każdy obiekt narysowany na płótnie może być animowany. Nawet jeśli nie daje to poczucia natchnienia, ogólne przedstawienie jest satysfakcjonujące dla większości zastosowań i projektów. Elastyczność. Może wyświetlać linie, kształty, tekst, obrazy, itp.; możliwe jest także dodawanie obrazu i/lub dźwięku. Obsługa przeglądarki/platform. HTML5 Canvas jest obsługiwany przez wszystkie główne przeglądarki i może być dostępny z komputerów stacjonarnych, tabletów i smartfonów - raz utworzona aplikacja może działać prawie wszędzie (w przeciwieństwie do Flash i Silverlight). HTML5 Canvas oferuje doskonałą przenośność z komputerów stacjonarnych na urządzenia mobilne. Nawet jeśli nie wszystkie jego funkcje są zaimplementowane we wszystkich przeglądarkach, programiści mogą być pewni, że płótno będzie obsługiwane w nieskończoność.

Obsługa płótna w przeglądarkach.

Kolejną zaletą korzystania z płótna jest to, że jest ono renderowane przez GPU (kartę graficzną) urządzenia, a nie z procesora. Pozwala to na dystrybucję zasobów w urządzeniu, ponieważ procesor może obsługiwać inne zadania (takie jak kliknięcia, przewijanie, karty, manipulacje DOM-em itp.) podczas gdy GPU renderuje obiekty na płótnie.

W odróżnieniu od elementów w DOM-ie, obiekty na płótnie są rysowane na płótnie tylko wtedy, gdy są umieszczone w widocznym miejscu, dzięki czemu płótno jest lekkie. Zazwyczaj, nawet jeśli element znajduje się na dole długiej strony internetowej, a zwój znajduje się na górze, to i tak musi zostać załadowany jako część strony, co czyni go ciężkim.

Inną ciekawą funkcją jest możliwość wykorzystania WebGL API, biblioteki JavaScript, która umożliwia dostęp do procesora graficznego w celu przetworzenia obrazu, będącego częścią elementu płótna HTML5. Daje to jeszcze więcej możliwości i większą wydajność z systemami cząstek, pozwalając na renderowanie tysięcy cząstek jednocześnie.

Canvas on Mobile

Ostatnio pomysł wykorzystania płótna w aplikacjach hybrydowych z Cordovą oraz frameworkach i usługach takich jak cocoon, playcanvas, babylonjs, threejs był bardzo atrakcyjny dla wielu deweloperów - trend nie ogranicza się do aplikacji mobilnych. Istnieje wiele znanych problemów ze starszymi wersjami Androida, ale projekt Crosswalk zajmuje się tymi problemami, dostarczając ujednoliconą wersję WebView, opartą na najnowszej wersji Google Chromium. Dlatego też, jeśli przetestujesz ją w swoim urządzeniu i będzie działać, możesz mieć pewność, że będzie działać we wszystkich urządzeniach użytkowników.

Nawet React Teams z Facebooka i Flipboardu eksperymentował z możliwością tworzenia aplikacji mobilnych na płótnie, jak pokazuje projekt reaktywnego płótna. Nawet pomysł reaktywnego DOM-u w ReactJS'ie wziął się z koncepcji płóciennej: odtworzyć całe drzewo DOM-u za każdym razem, gdy zdarzy się jakieś zdarzenie, ale przerysować tylko te sekcje i węzły, które się zmieniły. To była rewolucyjna realizacja, w przeciwieństwie do koncepcji AngularJs 1.x, która stale obserwuje zmienne dla zmian. Teraz AngularJs 2.x zaadoptował te same koncepcje w ich ramach.

Najczęstsze zastosowania

  • Gry. Canvas jest jednym z najlepszych kandydatów do produkcji gier 2D, wspierane są również gry 3D; BabylonJs i ThreeJs to dwa z najlepszych frameworków na rynku. Reprezentacja danych. To łatwe do tworzenia interaktywne wykresy i schematy z elementem płótna, np. Chart.js & CanvasJs. CanvasJS na przykład twierdzi, że jest 10x szybszy niż konwencjonalne biblioteki Flash lub SVG, co daje w rezultacie lekkie, czułe pulpity. Reklama. Jest to świetny zamiennik dla banerów i reklam opartych na technologii Flash. Fantastycznym przykładem jego zastosowania w interaktywnej reklamie może być prezentacja BMW i8, Renault Espace, supergwiazdy zapaśnika John Cena czy interaktywny film Just A Reflektor of Arcade Fire. Edukacja i szkolenia. Płótno HTML5 może być wykorzystywane do tworzenia skutecznych i atrakcyjnych doświadczeń edukacyjnych, łącząc tekst, obrazy, filmy i dźwięk. Płótno LSM jest dobrym przykładem na to, jak zapewnić taką usługę. Redaktorzy obrazów i sztuki. Jest naprawdę odpowiedni do tworzenia internetowych edytorów obrazu dla mediów społecznościowych lub interaktywnych projektów artystycznych. FabricJs, dosłownie canvas, miniPaint.