[HTML5] Canvas – jak go wykorzystać na stronie WWW?
Ten wpis ma 15 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Wraz z pojawieniem się nowej specyfikacji HTML5 (jakiś czas temu) pojawiły się nowe możliwości. O części z nich już zdążyłem wspomnieć na blogu, jak choćby wstawianie elementów audio i video na stronach czy też budowanie semantycznej struktury strony lub formularzy z wykorzystaniem HTML5.
W dzisiejszym wpisie przedstawię sposób na pracę z elementem canvas na stronach WWW.
Sekcja 1Canvas - a co to jest w ogóle?
Element canvas jest częścią specyfikacji HTML5 i pozwala na dynamiczne, oskryptowane (za pomocą JS) generowanie elementów 2D oraz obrazków na stronach WWW. Jest to niskopoziomowy, proceduralny model, który odświeża grafikę i nie posiada wbudowanego wyglądu startowego (np. tak jak przycisk button czy element input).
Sekcja 2Canvas - prosty sposób wykorzystania na stronie
Wykorzystanie elementu canvas na stronie jest bardzo łatwe i na początek wystarczy wstawić tylko taki kod:
1
2
3
<canvas width="640" height="480">
<!--tu możemy wstawić cokolwiek co będzie obsługiwało przypadek, gdy przeglądarka nie obsługuje elementu canvas, np. grafikę lub element object-->
</canvas>
Należy pamiętać, że obiekty są rysowane względem osi XY, której punkt początkowy (0,0) znajduje się w lewym górnym rogu elementu canvas.
Następną rzeczą, którą należy zrobić, aby canvas "zaczął żyć" jest napisanie kodu JS.
Sekcja 3"Ożywiamy" element canvas z pomocą JS
Na początek dołączmy bibliotekę jQuery (nie jest wymagana, ale ułatwia pisanie kodu) do sekcji HEAD:1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> |
1 2 3 4 5 6 | $(document).ready(function() { var canvas = $('#pole');//zmienna z nazwą elementu canvas var context = canvas.get(0).getContext('2d');//ustawiamy kontekst względem którego będziemy modelować grafikę na elemencie canvas context.fillStyle = 'rgb(156,255,40)';//definiujemy kolor wypełnienia context.fillRect(50, 50, 100, 100);//rysujemy kwadrat (x,y,szer,wys) }); |
Sekcja 4HTML5 canvas - sterowanie kwadratem z wykorzystaniem klawiatury
Kod, który byłby odpowiedzialny za poruszanie kwadratem na przestrzeni elementu canvas wygląda następująco:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | var kierunek = null; //przypisujemy kody klawiszy odpowiedzialnych za ruch var lewo = 37,//strzałka w lewo gora = 38,//strzałka do góry prawo = 39,//strzałka w prawo dol = 40;//strzałka w dół //kiedy wciskamy klawisz to poruszaj kwadratem document.onkeydown = function(ev) { switch(ev.keyCode) { case lewo: case gora: case prawo: case dol: kierunek = ev.keyCode; break; default: kierunek = null; break; } if (kierunek) return false; } //kiedy puszczamy klawisz to przestań poruszać się document.onkeyup = function(ev) { kierunek = null; } $(document).ready(function() { var canvas = $('#pole');//zmienna z nazwą elementu canvas var context = canvas.get(0).getContext('2d');//ustawiamy kontekst względem którego będziemy modelować grafikę na elemencie canvas var cords = {x:50,y:50}; rysuj(context, cords); }); function rysuj(context,cords) { context.beginPath(); //czyszczenie obszaru elementu canvas context.clearRect(0,0,640,480); context.fillStyle = 'white'; context.strokeStyle = 'black'; context.fillRect(0,0,640,480); //generujemy kwadrat context.rect(cords.x,cords.y,50,50); context.fillStyle = 'rgb(156,255,40)'; context.fill(); context.stroke(); context.closePath(); //kierunki w poziomie var x_diff = 0; if(kierunek == lewo) x_diff = -1; if(kierunek == prawo) x_diff = 1; //kierunki w pionie var y_diff = 0; if(kierunek == dol) y_diff = 1; if(kierunek == gora) y_diff = -1; //poruszamy kwadratem w określonym kierunku, poniższy kod zawiera blokadę opuszczenia elementu canvas przez kwadrat var new_cords = { x: (cords.x+x_diff > 0 && cords.x+x_diff < 500) ? cords.x+x_diff : cords.x, y: (cords.y+y_diff > 0 && cords.y+y_diff < 500) ? cords.y+y_diff : cords.y }; //określamy odstęp czasowy co ile ma się odświeżać element canvas setTimeout(function(){ rysuj(context,new_cords)}, 10); } |
Sekcja 5Podsumowanie
Mam nadzieję, że powyższy przykład pozwoli Ci uzmysłowić potęgę nowego elementu specyfikacji HTML5, a także wskaże kierunek w jakim mógłbyś/mogłabyś podążać w celu rozwijania interfejsu i interakcji na swoich stronach WWW.
W następnym artykule przedstawię listę ciekawych implementacji elementu canvas i kodu JS na stronach WWW, co jeszcze bardziej pozwoli Ci na zapoznanie się z tą technologią.
Demo z tego artykułu można znaleźć pod tym adresem: HTML5 canvas - animowany kwadrat
Jeśli jesteś bardziej zainteresowany/a tym tematem to zapraszam do przeczytania treści tej strony.
O autorze
