chevron-left chevron-right

[HTML5] Canvas – jak go wykorzystać na stronie WWW?

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.

Canvas - 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).

Canvas - 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>
Tak napisany kod nie generuje niczego specjalnego. Po prostu puste pole na którym nic nie ma. Aby element zaczął żyć, należy go obsłużyć kodem JS. Wtedy dopiero zacznie generować elementy 2D na stronie. Warto zwrócić uwagę na wykorzystanie atrybutów width i height. Gdyby nie te atrybuty to element canvas miałby domyślne rozmiary o szerokości 300 pikseli i wysokości 150 pikseli. Umiejscowienie tego elementu możemy dowolnie zmieniać za pomocą CSS.
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.

"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>
Następnie zamieszczamy poniższy kod, który wygeneruje nam prostą grafikę na elemencie canvas: 
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)
});
W ten sposób uzyskaliśmy zielony kwadrat o wymiarach 100x100. Nic szczególnego, ale z pomocą odpowiednio napisanego skryptu JS możemy taki kwadrat wprawić w ruch po elemencie canvas. Zapewnia to dość dużą interakcję z użytkownikiem.

HTML5 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);
}
Jak widać, znacząco rozszerzyłem poprzedni kod, który tylko generował kwadrat w jednym, określonym miejscu. W tej chwili możemy sterować kwadratem korzystając ze strzałek na klawiaturze. A to już może być zaczątkiem jakiejś gry!! Na przykład wężyka. W zasadzie jesteśmy nieograniczeni jeśli chodzi o tworzenie gier na bazie JavaScript, dzięki czemu nie musimy korzystać z ciężkiego Flasha!!

Podsumowanie

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.