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

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

[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.

  • Pamiętam kiedyś czegoś szukałem i przypadkiem wpadłem na HTML5 Canvas Pre3d Rotating Cube. Jedno mnie denerwowało. Że jak się wyjechało myszka po za „frame” podczas trzymania i obracania to „event” przestawał działać. Co do Twojego dema to mogłeś jedną rzecz przewidzieć. Mianowicie chodzi o trzymanie np. strzałki w dół i w prawo :] Chyba już wiesz o co mi chodzi? Jeżeli nie to podpowiem. Jazda kwadratu po skosie.

  • fenomenalnie przygotowane, dzięki wielkie! Sam próbowałem to ogarnąć czytając książkę HTML5 i CSS3, ale szło mozolnie 

  • Comandeer

    Nie do końca się zgodzę, że canvas to tylko 2D. Nie zapominajmy o WebGL 😉
    Niepotrzebnie dołączasz jQuery i uczysz ludzi, że nawet do pobrania elementu z DOM muszą używać tej bilbioteki :/ nie używasz jej praktycznie dalej (document.onkeydown zamiast wersji z jQuery).
    poza tym – kod nie jest w funkcji anonimowej i bruździ w globalnym scope. wystarczy, że wpiszę sobie w pasku adresu javascript:kierunek=38 i kwadracik sam jedzie 🙂

  • Piotr Nalepa

    Masz rację, dopisałem że obsługuje tez 3D. Mimo, że WebGL jeszcze ma problemy z bezpieczeństwem.
    Co do jQuery, to wspomniałem, że nie jest wymagana. Wykorzystuję ją właściwie bez przerwy w swoich projektach stąd też dołączyłem ją w tym artykule. Selekcję elementów można dokonać za pomocą czystego JS i nic nie stoi na przeszkodzie, aby tak zrobić.
    Global scope ………. na potrzeby artykułu nie martwiłem się tym elementem, lecz masz rację, że powinno się zwracać na to uwagę.
    Dzięki za komentarz 🙂

  • Liczyłem na to, że demo poprawisz do tego czasu (sugestie powyżej w pierwszym komentarzu).

  • Piotr Nalepa

    myślę, że nie ma takiej potrzeby 😉 jeśli ktoś będzie chciał to rozwinąć bardziej i zrobić obsługę jazdy po skosie, to się tym zajmie

  • Ian

    Wykorzystałem canvas do zaprojektowania symulatora pracy wykrawarki numerycznej. Strona http://www.csharp.strefa.pl/punchTest.htm pokazuje JavaScript do obsługi rysowania na canvasie z wykorzystaniem odczytu innych elementów na stronie. Więc nie tylko gry!

  • Piotr Nalepa

    gratuluję pomysłu i wykonania

  • Paweł

    Faktycznie mam problem z polskimi znakami. Ustawiam czcionkę Arial, w której są normalnie polskie znaki, ale niestety na stronie dalej ich nie widzę…