search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

Asteroidy - Microsoft

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

Touch effect - Microsoft

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

Akwarium - Microsoft

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

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

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

Sketchpad - 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

Quake 2 Web Browser Game

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.

  • 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ł

    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

    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.