HTML5 Canvas - podstawy

HTML5 daje nam wiele nowych możliwości, między innymi nowy element canvas. Element ten to środowisko do tworzenia dynamicznych grafik. Grafikę tworzymy za pomocą skryptów JavaScript.

Podstawy Canvas

Do stworzenia elementu canvas wystarczy podać znacznik otwierający, zamykający oraz wymiary. Kiedy wymiary nie są określone, to obiekt canvas będzie posiadał wielkości domyślne czyli 300 pikseli szerokości i 150 pikseli wysokości.
<canvas id="obrazek" width="360" height="240">
</canvas>
Jeśli podamy jakąś treść pomiędzy znacznikiem otwierającym i zamykającym zostanie ona wyświetlona w przeglądarkach, które nie obsługują tego elementu. Możesz sprawdzić jakie najpopularniejsze przeglądarki obsługują element canvas. To praktycznie wszystko w tworzeniu canvasa w html. Reszta czyli właściwe rysowanie odbywa się w JavaScripcie.

HTML5 Canvas API

Na początku musisz odnieść się do elementu canvas i jego kontekstu. Słowo "kontekst" oznacza tutaj po prostu API.
var canvas = document.getElementById('obrazek');
var context = canvas.getContext('2d');
Teraz można już rysować w dwuwymiarowej przestrzeni canvas. Zanim zaczniemy warto spojrzeć na poniższy rysunek pokazujący jak w canvasie określamy współrzędne. Współrzędne Narysujmy teraz prostokąt.
context.fillRect(50,30,100,130);
Powyższa linijka narysuje nam wypełniony prostokąt (na razie czarny), którego lewy górny róg będzie w punkcie (50,30) – 50 to odległość od lewej krawędzi, 30 od górnej. Szerokość wynosi 100 a wysokość 130. Teraz narysujemy sam obrys prostokąta, określając przy okazji jego kolor.
context.strokeStyle = '#990000';//kolor linii
context.strokeRect(20,30,100,50);//rysujemy prostokąt bez wypełnienia
HTML5 canvas - strokeRect Kolor wypełnienia definiujemy za pomocą atrybutu fillStyle. Następnie wypełnijmy prostokąt.
context.fillStyle = '#bbbbbb';
context.fillRect(15,40,75,50);
HTML5 canvas - fillRect
MetodaOpis
fillRect(x,y,w,h)Rysuje prostokąt używając aktualnego stylu wypełnienia
strokeRect(x,y,w,h)Rysuje kontur prostokąta używając aktualnego
clearRect(x,y,w,h)Czyści piksele w określonym prostokącie
Teraz narysujemy linię.
context.beginPath();
context.moveTo(50, 100);
context.lineTo(100, 70);
context.stroke();
Na początku rozpoczynamy ścieżkę i metodą moveTo ustawiamy punkt startowy rysowania (50,100), następnie tworzymy linię metodą lineTo - do punktu (100,70). Po tych dwóch metodach nie zobaczymy jeszcze narysowanej linii w canvasie. Na koniec trzeba jeszcze wywołać metodę stroke. HTML5 canvas - lineTo Do rysowania kół lub okręgów i nie tylko można wykorzystać funkcję arc. arc(x, y, promień, kąt początkowy, kąt końcowy, zgodność ze wskazówkami zegara)
x, y – współrzędne środka, kąty określają początek i koniec łuku w radianach, ostatni parametr jeśli jest ustawiony na false rysuje łuk zgodnie ze wskazówkami zegara, jeśli true w przeciwnym kierunku.
Poniżej kod rysujący okrąg.
context.beginPath();
context.arc(30, 30, 15, 0, 2*Math.PI, false);
context.stroke();

Ścieżki w HTML5 Canvas

Tak naprawdę rysując poprzednio linię stworzyliśmy już prostą ścieżkę. Każdą ścieżkę w canvasie rozpoczynamy od wywołania metody beginPath. Do rysowania ścieżki składającej się z samych linii prostych wystarczą metody moveTo i lineTo. Spójrzmy na poniższy przykład rysujący trójkąt.
context.strokeStyle = "blue";
context.beginPath();
context.moveTo(25,45);
context.lineTo(60,100);
context.lineTo(80,40);
context.lineTo(25,45);
context.stroke();
HTML5 canvas - arc Oprócz koloru możemy określić dodatkowe opcje takie jak grubość linii oraz rodzaj zakończenia łączeń ścieżek (round, bevel, miter).
context.lineWidth = 4;
context.lineJoin = 'round';
Zajmiemy się teraz rysowaniem krzywych. Mamy do dyspozycji krzywe kwadratowe i krzywe Beziera. Różnica pomiędzy tymi krzywymi polega na tym, że krzywe kwadratowe mają jeden punkt kontrolujący, a krzywe Beziera dwa. quadraticCurveTo(pk1x, pk1y, x, y)
(zobacz obszar roboczy - poniżej)
bezierCurveTo(pk1x, pk1y, pk2x, pk2y, x, y)
gdzie, pk1x, pk1y – współrzędne pierwszego punktu kontrolengo, pk2x, pk2y – współrzędne drugiego punktu kontrolengo, x, y – współrzędne punktu końcowego.
HTML5 canvas - krzywe Powyższy rysunek został wykonany za pomocą poniższego kodu.
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(70, 50, 60, 90);
context.quadraticCurveTo(310, 250, 410,550);
context.strokeStyle = '#663366';
context.lineWidth = 2;
context.stroke();
Teraz narysujemy krzywą Beziera.
context.beginPath();
context.moveTo(100, 50);
context.bezierCurveTo(70, 50, 130, 150, 150, 100);
context.strokeStyle = '#663366';
context.lineWidth = 2;
context.stroke();
HTML5 canvas - krzywe Beziera

Obrazki w canvas

Zajmiemy się teraz wstawianiem obrazków do canvas. Canvas API zawiera kilka prostych poleceń do dodawania obrazków. Zanim zaczniemy wykonywać jakiekolwiek operacje na obrazku powinniśmy się upewnić, że jest on całkowicie załadowany.
var img = new Image();   // Tworzy nowy obiekt Image
img.src = 'obrazek.png'; // Ustawiamy ścieżkę do obrazka
img.onload = function(){
	// Tutaj wykonujemy instrukcję drawImage
	context.drawImage(img,0,0);
}
Do wyświetlenia obrazka w canvas używamy metody drawImage. Jest ona przeciążona i posiada trzy warianty. drawImage(img, x, y)
img – odniesienie do naszego obrazka, x i y - współrzędne miejsca w canvas, gdzie nasz obrazek powinien zostać umieszczony.
drawImage(img, x, y, width, height)
width i height - wymiary obrazka w odpowiednim położeniu w canvas.
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Najlepiej ilustruje to rysunek.

Gradienty

Możemy również tworzyć gradienty. Do dyspozycji mamy gradient liniowy i promienisty. Funkcje, które będziemy używać przedstawia poniższa tabelka.
Nazwa metodyOpis
createLinearGradient(x0, y0, x1, y1)Tworzy obiekt gradientu liniowego od punktu (x0, y0) do (x1, y1)
createRadialGradient(x0, y0, r0, x1, y1, r1)Tworzy obiekt gradientu radialnego od koła o środku (x0, y0) i promieniu r0 do koła o środku (x1, y1) i promieniu r1
addColorStop(offset, color)Dodaje znacznik zatrzymania koloru. Offset może być z przedziału od 0 do 1.0
Najlepiej istotę gradientów oddadzą poniższe przykłady. Gradient radialny:
var gradient = context.createRadialGradient(80,63,30,80,63,80);
gradient.addColorStop(0, '#12e345');
gradient.addColorStop(1, '#E5FF00');
context.fillStyle = gradient;//ustawiamy wypełnienie na gradient
context.fillRect(15,0,140,140);
HTML5 canvas - gradient radialny Gradient liniowy:
var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(0.6, 'green');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
HTML5 canvas - gradient liniowy

Transformacje

Zanim zajmiemy się transformacjami wprowadzimy dwie metody, które są bardzo użyteczne przy tworzeniu bardziej skomplikowanych rysunków. save() - zapisuje kopię aktualnego stanu rysunku,
restore() - przywraca stary stan rysunku.
Pierwszą transformacją, którą przedstawię jest translacja (przesunięcie). Metoda translate(x,y) odpowiada właśnie za przesunięcie. Przyjmuje ona dwa parametry – x określa przesunięcie canvas w poziomie, a y w pione. Spójrzmy na poniższy listing. Dokładne jego przeanalizowanie pozwala zorientować się w działaniu translacji oraz metod save() i restore(). Na początku zapisujemy stan canvas metodą save(), następnie dokonujemy przesunięcia o wektor [130,120]. Następnie rysujemy prostokąt. Jak widać mimo, że ustawiliśmy początek prostokąta na punkt (0,0) to zaczyna się on w punkcie (130,120) – jest to wynikiem wcześniejszej translacji. Na koniec przywracamy poprzedni stan metodą restore(), ustawiamy wypełnienie na kolor zielony i rysujemy ten sam prostokąt. Teraz już prostokąt będzie położony w lewym górnym rogu. HTML5 canvas - translacja
context.save();
context.translate(130, 120);
context.fillRect(0,0,90,90);
context.restore();
context.fillStyle = "green";
context.fillRect(0,0,90,90);
Transformacja skalowania (metoda scale()) używana jest do zwiększania lub zmniejszania jednostek w canvas. Dzięki tej transformacji możemy rysować powiększone lub pomniejszone obiekty. Użycie tej metody ilustruje poniższy kod. HTML5 canvas - skalowanie
context.save();
context.scale(2, 2);
context.fillRect(0,0,40,40);
context.restore();
context.fillStyle = "green";
context.fillRect(0,0,40,40);
Kolejną transformacją jest obrót – rotate(kąt). Kąt (zgodny z ruchem wskazówek zegara) podajemy w radianach. Poniżej mamy przykład zastosowania obrotu. HTML5 canvas - obrót
context.save();
context.rotate(Math.PI/4);
context.fillRect(50,0,40,40);
context.restore();
context.fillStyle ="green";
context.fillRect(50,0,40,40);
Najbardziej rozbudowaną metodą jest transform(m11, m12, m21, m22, dx, dy). Modyfikacji dokonujemy bezpośrednio na macierzy transformacji. Metoda ta musi pomnożyć bieżącą macierz transformacji z poniższą macierzą. HTML5 canvas - macierz Przykład zastosowania do dodania cienia naszego kwadratu.
context.save();
context.fillRect(50,60,40,40);
context.transform(1, 0,-0.5, 1, 30, 40);
context.scale(1, 0.6);
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(50,60,40,40);
HTML5 canvas - transformacje

Tekst w canvas

Przedstawię teraz metody służące do wstawiania i modyfikowania tekstów.
Metoda / WłaściwośćOpis
fillText (text, x, y, maxwidth)Rysuje określony tekst, używając aktualnego koloru wypełnienia.
strokeText (text, x, y, maxwidth)Obrysowuje określony tekst, używając strokeStyle.
fontCzcionka np. Arial.
textAlignWyrównanie, możliwe wartości to start, end, left, right, center.
textBaselineMożliwe wartości: top, hanging, middle, alphabetic, ideographic, bottom.
Wstawimy teraz tekst do canvasa.
context.font = "50px impact";
context.fillStyle = '#29DFDB';
context.textAlign = 'center';
context.fillText('Hello World', 200, 60, 400);
HTML5 canvas - text Określamy rozmiar i rodzaj czcionki, kolor wypełnienia, wyrównanie oraz sam tekst do wstawienia. Ponadto jego położenie i maksymalną szerokość (maxwidth – parametr opcjonalny). Po zapoznaniu się z podstawami HTML5 Canvas na pewno przyda ci się Html5 canvas cheatsheet.

Komentarze 2

w3b

03.12.2011 11:17

Bardzo przyjemne wprowadzenie do tematu Canvas :) Dziękuję bardzo - przyda mi się do realizacji wykresów. Przy okazji dodam, że w Poznaniu będzie organizowane ciekawe spotkanie na temat js, a jako że interesuje się Pani szeroko pojętym webmasteringiem to może wyda się Pani interesujące - http://poznan.gtug.pl/meet-js-summit . Pozdrawiam

Ian

12.10.2012 17:26

Na stronie www.csharp.pl/punchTest.htm pokazuję canvas jako symulator wykrawarki numerycznej. Skrypt pokazuje wymagane w tym przypadku odwrócenie układu współrzędnych. Pozdrawiam

Dodaj komentarz