This tutorial is in the process of being written as of September 26th 2005.
<canvas>
jest nowym elementem HTML, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj JavaScript). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i nie tylko prostych) animacji. Rysunki po prawej pokazane są jako przykłady implementacji <canvas>
, które zobaczymy później w tym przewodniku.
Po raz pierwszy <canvas>
został przedstawiony przez Apple dla Mac OS X Dashboard i później zaimplementowany w Safari. Przeglądarki oparte o gałąź Gecko 1.8, takie jak Firefox 1.5, także obsługują ten nowy element. Element <canvas>
jest częścią specyfikacji WhatWG Web applications 1.0 znanej także jako HTML 5.
W tym przewodniku będę chciał opisać jak zaimplementować element <canvas>
na Twoich własnych stronach HTML. Przykłady powinny dostarczyć Ci, czystych pomysłów - jak użyć <canvas> i będziesz ich mógł użyć przy budowie własnych implementacji.
Zanim zaczniesz
Użycie elementu <canvas>
nie jest trudne, lecz musisz zrozumieć podstawy HTML i JavaScript.
Wobec tego co napisane jest powyżej, element <canvas>
nie jest obsługiwany we wszystkich nowoczesnych przeglądarkach, więc będziesz potrzebował Firefoksa w wersji minimum 1.5, innej przeglądarki opartej o silnik Gecko lub ostatnią wersję przeglądarki Safari, aby móc obejrzeć wszystkie przykłady w akcji.
W przewodniku m. in.
- Proste zastosowanie
- Rysowanie kształtów
- Zastosowanie obrazków
- Zastosowanie stylów i kolorów
- Transformacje
- Kompozycje
- Proste animacje