Artykuł

gru 03 2011
0

Wprowadzenie do rysowania na kanwach w HTML5

Ostatnimi czasy, znów jest głośno o tytułowym HTML5 oraz o konkurującej z nim w niektórych aspektach technologii Flash. Na tym poletku, szczególnie dwa wydarzenia odbiły się na korzyść naszego tytułowego bohatera.

Po pierwsze, Adobe ogłosił, ze kończy wsparcie dla mobilnej wersji Flash playera, co jednoznacznie w znaczący sposób ograniczy dostępność tej technologii na platformach mobilnych.

Drugi z faktów, na który warto zwrócić uwagę, to interaktywne Google Doodle, których ostatnimi czasy wyszukiwarkowy gigant serwuje nam całe multum. To co powinno przykuwać naszą uwagę w tym momencie, to fakt że żadne z nich nie zostało wykonane przy pomocy technologii Flash, lecz właśnie za pomocą HTMLa, CSS, JavaScript oraz kilku innych technologii im towarzyszących.

Jedną z takich technologii, która może nadszarpnąć udziały Flasha w rynku, są kanwy zawarte w specyfikacji HTML5. O tym czym one są i jak z nich korzystać, postaram się Wam wyjaśnić w dzisiejszym wpisie.

Co to jest Canvas i jak go umieścić na stronie

Canvas to jeden z nowych znaczników, który pojawił się w jeszcze wciąż nieukończonej specyfikacji HTML5. Canvas (a po polsku po prostu kanwa) to znacznik, który umożliwia stworzenie nam pustego, nie zapisanego w żaden sposób obszaru, który możemy później wypełnić za pomocą JavaScriptu.

Co zatem trafia do obszaru zarezerwowanego w miejsce kanwy? Najzwyczajniej w świecie są to rysunki, których postać definiujemy za pomocą wspomnianego przed chwilą JavaScriptu.

Znacznik Canvas, podlega wszystkim nam dobrze znanym zasadom związanym z tagami HTML. Zasadniczo, dla każdego jego wystąpienia na stronie, powinniśmy zdefiniować również trzy atrybuty:

  • id - pozwoli na szybkie i łatwe wyłowienie elementu z drzewa DOM
  • width - określa szerokość obszaru, po którym będziemy mogli rysować
  • height - określa wysokość obszaru, po którym będziemy mogli rysować

Najbardziej istotne są atrybuty drugi i trzeci, które określają rozmiar naszej kanwy. Bez id można sobie poradzić, jednak użycie i tego atrybutu jest wskazane.

Jak to wygląda w praktyce? Spójrzcie na poniższy kod:

<canvas id="my-canvas" width="600" height="300">
   Treść zastępcza
</canvas>

Powyższy kod, spowoduje wygenerowanie kanwy o identyfikatorze my-canvas i rozmiarze 600x400 pikseli. Widoczna we wnętrzu znacznika treść pojawi się tylko wtedy, kiedy Canvas nie będzie obsługiwany przez przeglądarkę. Dlatego też warto umieścić w tym miejscu stosowną informację dla naszych użytkowników.

Pobieranie kontekstu w JavaScript

Aby móc rozpocząć rysowanie na kanwie, musimy najpierw sprawdzić czy kontekst rysowania jest dostępny, a następnie w przypadku sukcesu - pobrać go.

Możemy również obsłużyć zdarzenie, w którym kontekst nie będzie obsługiwany. Dzięki temu, będziemy w stanie zapewnić alternatywne rozwiązanie dla użytkowników starszych przeglądarek. Równie dobrze, możemy jednak porzucić zamysł stworzenia jakiejkolwiek instrukcji w tym miejscu, bo należy pamiętać, że w przypadku gdy Canvas nie zadziała, to zostanie wykonana zawartość tego znacznika.

Spójrzmy najpierw na kod JavaScript:

var oCanvas = document.getElementById("my-canvas");
if(oCanvas.getContext){
	var oContext = oCanvas.getContext('2d');
	// dalsze akcje...
} else {
	// jeśli context nie działa...
}

Jeśli na stronie, macie podpiętą bibliotekę jQuery, to można również napisać i tak:

var oCanvas = $("my-canvas")[0];
if(oCanvas.getContext){
	var oContext = oCanvas.getContext('2d');
	// dalsze akcje...
} else {
	// jeśli context nie działa...
}

Generalnie oba rozwiązania różnią się minimalnie i pozwalają na uzyskanie tego samego efektu.

Jak rysować?

Rysować w kanwie można całkiem prosto. Po pierwsze, musicie zrealizować wszystko co wyżej napisałem. Później wystarczy poruszać się w tej sekcji kodu:

if(oCanvas.getContext){
	var oContext = oCanvas.getContext('2d');
	// dalsze akcje...
}

Powyższy kod, można uznać za kod bazowy, który musi się znaleźć w każdym projekcie wykorzystującym kanwy. Dlatego też pominę go już w kolejnych przykładach.

Rysowanie prostokątów

Rysowanie figur nie powinno nastręczyć większych trudności. Najpierw, musimy określić styl wypełnienia/konturu, a następnie wywołać funkcję rysującą określoną figurę. Dla przykładu, aby narysować niebieski, wypełniony prostokąt, musimy zastosować następującą konstrukcję:

oContext.fillStyle = "#57baf0";
oContext.fillRect(5, 5, 100, 100);

Najpierw określamy styl wypełnienia (kolor), a następnie stosujemy funkcję fillRect, z parametrami 5, 5, 100, 100, co przekłada się odpowiednio na pozycję: x:5, y:5 (lokalizacja lewego górnego rogu figury); oraz wymiary: szerokość:100, wysokość:100 - parametry dokładnie w tej kolejności.

Jeśli chcemy, narysować same kontury określonej figury, stosujemy następującą konstrukcję:

oContext.strokeStyle = "rgb(0, 0, 0)";
oContext.strokeRect(115, 5, 100, 100);

Zmieniło się tutaj kilka rzeczy. Po pierwsze, słowo kluczowe fill (wypełnienie) w obu właściwościach zostało zastąpione słowem stroke. Stroke, pozwala na rysowanie czegoś na kształt konturu.

Zastosowałem również tutaj inny sposób podawania koloru, za pomocą wartości RGB. W tym przypadku, będzie to oczywiście kolor czarny.

Zapewne, zadacie sobie teraz pytanie - w jaki sposób narysować prostokąt/kwadrat wypełniony i z konturem? W gruncie rzeczy jest to całkiem proste, wystarczy połączyć obie konstrukcje w odpowiedniej kolejności:

oContext.fillStyle = "#57baf0";
oContext.fillRect(225, 5, 100, 100);
oContext.strokeStyle = "rgb(0, 0, 0)";
oContext.strokeRect(225, 5, 100, 100);

Sumarycznie, stosując kod z trzech ostatnich listingów, powinniśmy uzyskać następujący efekt:

Rysowanie linii

HTML5 pozwala oczywiście również na rysowanie linii i to nawet takich łamanych. Proces rysowania linii, zasadniczo może składać się z trzech etapów:

  • Ustalamy podstawowe właściwości rysowania (grubość linii, kolor, itp.)
  • Wyznaczymy punkty, przez które przechodzić ma nasza linia (wiadomo, że jeśli będzie ich więcej niż dwa, to wtedy wyjdzie nam łamana)
  • Malujemy kontury/wypełniamy obszar oraz zamykamy ścieżkę

Z pozoru, wydaje się że lista przedstawionych czynności, które należy wykonać jest całkiem długa, w gruncie rzeczy nie jest jednak tak źle. Nie wszystkie funkcje, które wymieniłem wyżej są wymagane. Pozmieniać do pewnego stopnia można również kolejność wykonywanych operacji.

Spójrzmy zatem na przykład:

oContext.strokeStyle = '#57baf0';
oContext.lineWidth = 5;

oContext.beginPath();
oContext.moveTo(10, 10);
oContext.lineTo(100, 10);
oContext.lineTo(10, 100);
oContext.lineTo(10, 10);

oContext.stroke();
oContext.closePath();

Ten krótki kod, pozwoli na wyrysowanie trójkąta widocznego na screenie poniżej:

Prześledzimy teraz kod, linia po linii, by zrozumieć co tutaj się właściwie stało.

W linii 1, określamy kolor konturu, a w linii 2 grubość linii. To właśnie przez to, że grubość linii ustaliliśmy na większą niż jeden, w lewym górnym rogu pojawił się mały uskok (można oczywiście go skorygować, odpowiednio ustawiając punkty zaczepienia łamanej).

W liniach 4-8, ustalamy przebieg naszej łamanej. Funkcja beginPath, ustawia nasz wirtualny marker w lewym górnym rogu kanwy, czyli punkcie 0,0. Ponieważ ta lokalizacja nie do końca nas satysfakcjonuje, dlatego przesuwamy kursor do punktu 10, 10 (linia 5). Wartości każdego punktu, zawsze są podawane według schematu x, y - czyli odpowiednio odległość w poziomie i pionie.

Następnie (6-8) w kolejnych wierszach rysujemy trzy linie. Punktem startowym każdej z nich, będzie punkt w którym zakończyliśmy poprzednio rysowanie, a punktem końcowym będą koordynaty x oraz y podane w nawiasie funkcji lineTo.

Na zakończenie, wyświetlamy narysowane linie na ekranie funkcją stroke (10) oraz zamykamy otwartą wcześniej ścieżkę funkcją closePath (11).

Jeśli zamiast stroke skorzystalibyśmy z fill to otrzymalibyśmy wypełniony trójkąt.

Pisanie tekstu

Rysowanie tekstu, to ostatnia z funkcjonalności, którą chciałem dziś przedstawić. Najważniejsze w tym przypadku, to określić właściwości czcionki oraz jej kolor. Po zdefiniowaniu właściwości, należy wywołać funkcję fillText z trzema parametrami:

  • Tekst, który ma zostać wyświetlony
  • Wartość x (poziom), w której ma znajdować się lewy dolny róg tekstu
  • Wartość y (pion), w której ma znajdować się lewy dolny róg tekstu

Całość można zawrzeć w trzech, prostych linijkach:

oContext.font = "40px Verdana";
oContext.fillStyle = "#57baf0";
oContext.fillText("Alt Control Delete!", 5, 30);

Powyższy kod, daje następujący efekt:

Wszystko o czym napisałem powyżej, to tak naprawdę tylko próbka tego, co można zrobić przy użyciu elementu Canvas zawartego w specyfikacji HTML5. Zachęcam do dalszej nauki i własnego eksperymentowania w tej materii:)

Data ostatniej modyfikacji: 19.06.2014, 17:49.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus