[HTML5] Canvas – jak go wykorzystać na stronie WWW?
This post is 15 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
Section 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).
Section 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.
Section 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) }); |
Section 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); } |
Section 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.
About the author
