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

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.