[HTML5] 8 przykładów kreatywnego wykorzystania elementu canvas na stronach WWW

HTML5 Opublikowano: 1/10/2011

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

W ostatnim wpisie opisałem element canvas oraz sposób jego użycia. Natomiast, w dzisiejszym zamierzam przedstawić kilka efektownych przykładów wykorzystania elementu canvas na stronach WWW, które mogą być inspiracją dla Ciebie.

Asteroidy

Jeśli miałeś/aś styczność z grą Asteroids, to ten przykład pokazuje go w wersji „prawie 3D”. Bardzo fajne i można się pobawić.

Efekt dotyku

Jeden z moich ulubionych efektów, ale nie polecam go osobom, które nie źle reagują na szybko zmieniające się kolory i kształty.

Akwarium

Jest to trzeci przykład stworzony przez Microsoft, który pokazuje jak można stworzyć efektowną animację (choć dość prostą), którą przy odrobinie wysiłku można ciekawie rozbudować o nowe opcje. Dzięki czemu akwarium zyska na interaktywności.

Mario Kart Online

Za pomocą elementu canvas i JS można stworzyć różne gry, np. Mario Kart Online. Wyścigi z ludzikami z serii Mario wyglądają dość ciekawie.

Interaktywna mapa wiedzy

Ten przykład pokazuje jak można wykorzystać element canvas nie tylko do efektów czy gier, ale także do wizualizacji wiedzy. W tym przypadku źródłem wiedzy jest wkipedia.

Program do rysowania

Można tez utworzyć narzędzia do rysowania w oknie przeglądarki. Nie musimy się ograniczać do technologii Flash w tym celu.

Galeria zdjęć

Jest to ciekawa implementacja galerii zdjęć w oparciu o element canvas. Można to rozbudować o ciekawe przejścia 3D i wtedy element canvas pokaże pełnię możliwości.

Hit! – Quake2

Jeśli miałeś okazję uczestniczyć w potyczkach między kumplami w grze Quake2, np. podczas zajęć z informatyki (wszyscy wiemy jak jest ) to na pewno z sentymentem zagrasz w Quake2 w wersji przeglądarkowej. Można uruchomić tą grę u siebie na serwerze lokalnym i sprawdzić, jak się ma granie w przeglądarce do tradycyjnego grania w instalowaną wersję gry.

3 komentarze/y

pawelSafiStudio
01/10/2011 o 11:30
Niezłe Niedługo zamiast kupować gry w sklepie, będziemy kupować dostęp do nich przez net i grać przez przeglądarkę. Plus taki, że skończy się piractwo Oczywiście żartuję Dzięki za przykłady. HTML5 daje naprawdę ogrom możliwości.
Rafał
04/10/2011 o 19:32
Pewnie bym się zachwycił 10 lat temu, ale w porównaniu do to co oferuje i do czego przyzwyczaił nasz flash, trochę za późno pojawiła się ta technologia. Zaraz pojawią się głosy, że przecież lekkość kodu się liczy itp., ale spójrzcie proszę na obecne przepustowości. Reasumując – fajnie, że jest, ale za późno.
Piotr Nalepa
04/10/2011 o 19:39
Co nie zmienia faktu, że w mojej opinii należy unikać Flash na stronach jak tylko się da i akurat dzięki nowym elementom HTML5 i możliwościom CSS3 to odejście od Flash jest coraz bardziej możliwe.