[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.

Section 1Asteroidy

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ć.

Section 2Efekt 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.

Section 3Akwarium

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.

Section 4Mario 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.

Section 5Interaktywna 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.

Section 6Program do rysowania

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

Section 7Galeria 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.

Section 8Hit! - 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.