W kolejnym odcinku mojego “kursu” przygotowującego do egzaminu MCSD 70-480, zajmiemy się osadzaniem grafiki w dokumencie. Dowiemy się więc, co to jest obiekt Canvas oraz grafika wektorowa. Ponadto poruszony zostanie temat osadzania i definiowania w kodzie strony grafiki wektorowej - znaczniki <svg>. Wiedza zawarta w poście oparta jest w większości na informacjach z serwisu w3schools.com - również większość przykładów (czasem trochę zmienionych) pochodzi z tej strony. A więc do dzieła!

Canvas - osadzanie grafiki w dokumencie HTML

Obiekt <canvas> jest kontenerem graficznym, pozwalającym na rysowanie za pomocą języków skryptowych (zwykle JavaScript). Sam element <canvas> pozwala jedynie na zdefiniowanie przestrzeni do rysowania. Cała siła tego elementu leży w API, jaki dostarcza dla języków skryptowych. Dzięki niemu, mamy możliwość tworzenia w zdefiniowanym obszarze różnego rodzaju prostokątów, linii, wypełnień, cieni, gradientów itp. itd. Plusem wykorzystania elementu <canvas> jest też to, że grafika tworzona z jego użyciem, przetwarzana jest bezpośrednio przez kartę graficzną.

Przykład

Przejdźmy zatem do rzeczy, poniżej prosty przykład użycia elementu <canvas>:

<canvas id="myCanvas" width="200" height="200" style="border: 1px solid black;">
</canvas>

Znacznik <canvas> powinien być zawsze używany z atrybutami ‘width’ oraz ‘height’ - należy zawsze deklarować rozmiar obszaru rysowania. Ponadto warto dodawać również, atrybut ‘id’ aby łatwiej było odnieść się do niego z poziomuJavaScript’u. W przykładzie mamy też, zdefiniowany styl, który dodaje ramkę naszego “płótna” - obiekt <canvas> nie posiada jej domyślnie.

Użycie API

To w zasadzie tyle jeśli chodzi o znacznik <canvas> z punktu widzenia HTML. Przejdźmy teraz do możliwości jakie daje nam jego API. Poniżej prosty przykład:

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);

Na początku, w standardowy sposób pobierana jest referencja do elementu <canvas>. Kolejna linia jest ważna - wywoływana jest funkcja ‘getContext()’, zwracająca obiekt “kontekstu rysowania”. To ten obiekt posiada funkcje i właściwości, umożliwiające rysowanie na “płótnie”. W naszym przypadku, przekazując do metody ‘getContext()’ wartość “2d”, decydujemy się na rysowanie w dwóch wymiarach - specyfikacja jak na razie nie definiuje niestety innych opcji… Ale wróćmy do przykładu - w trzeciej i czwartej linii mamy odpowiednio zdefiniowanie wypełnienia (funkcja ‘fillStyle’), a następnie rysowanie prostokąta z wypełnieniem (funkcja ‘fillRect’).

Zatrzymajmy się jeszcze na chwilę przy metodzie ‘fillRect()’ i wyjaśnijmy znaczenie jej czterech parametrów - pierwsze dwa oznaczają punkt początkowy (odpowiednio dla osi X i Y w przestrzeni 2D). 0 i 0 oznaczają lewy górny róg “płótna” - jeśli chcielibyśmy aby nasz prostokąt zaczął się 10 pixeli od górnej krawędzi, podalibyśmy współrzędne 0 i 10. Kolejne dwa parametry to długość w osi X oraz długość w osi Y. Nasz prostokąt jest więc długi na 150 pixeli a wysoki na 75 pixeli.

Rysowanie linii

Przejdźmy teraz do narysowania linii. Najpierw przykład:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();

Jak łatwo wywnioskować, powyższy kod rysuje linię począwszy od lewego górnego rogu naszego “płótna”, a kończywszy w jego prawym dolnym rogu. W trzeciej linii powyższego kodu, “pędzel” ustawiany jest w punkcie (0,0) - metoda ‘moveTo’. Następnie ustalamy końcowy punkt linii, którą chcemy narysować - metoda ‘lineTo()’. Dopiero funkcja ‘stroke()’ rzeczywiście rysuje linię w obszarze ‘canvas’.

Okrąg

Idźmy dalej - poniższy przykład pokazuje, w jaki sposób narysować okrąg:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(100, 100, 40, 0, 2 * Math.PI);
context.fill();

W trzeciej linii widzimy wywołanie funkcji ‘arc()’ - pierwsze dwa parametry to współrzędne środka okręgu, trzeci parametr to promień okręgu w promieniach. Kolejne dwa parametry to ‘start’ i ‘stop’ - czyli jeśli w naszym przypadku 0 oznacza ‘start’, to ‘stop’ musi być co najmniej tak duże jak obwód okręgu - jeśli byłoby mniejsze, narysowany zostałby tylko jego wycinek. Na koniec wywoływana jest jedna z metod “atramentu” - w naszym przypadku ‘fill()’ - powoduje narysowanie okręgu z wypełnieniem. Jeśli wywołalibyśmy ‘stroke()’ narysowane zostałoby koło - czyli okrąg bez wypełnienia ;)

Wyświetlanie tekstu

Kolejny przykład obrazuje sposób na narysowanie tekstu:

var canvas = document.getElementById("myCanvas");
var context =canvas.getContext("2d");
context.font="30px Arial";
context.fillText("Hello World",10,50);

Tutaj również sprawa wygląda prosto - najpierw (w trzeciej linii) definiujemy font, a następnie (linia czwarta) rysujemy go. Pierwszy parametr to tekst jaki ma zostać narysowany, a dwa następne to współrzędne jego początku. W przykładzie użyta została metoda ‘fillText()’, która powoduje narysowanie liter jako wypełnionych. Można jednak użyć metody ‘strokeText()’ (z takimi samymi parametrami), która narysowałaby tylko obrysy liter.

Gradienty

Wróćmy teraz do rysowania prostokąta. Tym razem jednak nie wypełnimy go jednolitym kolorem tylko gradientem. Oto przykład:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// definicja gradientu
var gradient = context.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"white");

// rysowanie prostokąta
context.fillStyle = gradient ;
context.fillRect(10,10,150,80);

Do zdefiniowania gradientu użyta została funkcja ‘createLinearGradient()’ - jego cztery parametry wejściowe to współrzędne punktu początkowego i końcowego (istnieje jeszcze funkcja ‘createRadialGradient()’ - po szczegóły odsyłam do dokumentacji). Następnie definiowane są kolory gradientu i ich pozycje - może być ich dowolna ilość (pozycja jest jakąkolwiek liczbą od 0 do 1, a więc kolor w środku mógłby mieć pozycję 0.5 itd.). Na koniec, tak utworzony gradient ustawiamy jako obowiązujący styl wypełnienia (linia numer 10), a następnie rysujemy prostokąt w sposób opisany wcześniej.

Obrazki na płutnie

Ostatnia rzecz to wrzucanie obrazków na “płótno” - poniżej przykład:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj, 100, 50);
};
imageObj.src = 'image.jpg';

W celu umieszczenia obrazka wewnątrz elementu ‘canvas’ wykorzystuje się metodę ‘drawImage()’ - tutaj w linii szóstej. Aby jednak móc skorzystać z tej metody, musimy najpierw wczytać obrazek. Robi się to tworząc obiekt ‘Image’, a następnie przypisując ścieżkę prowadzącą do obrazka, do właściwości ‘src’. Jednak wczytywanie może trochę potrwać, dlatego zanim wywołamy metodę ‘drawImage()’, musimy na to poczekać. Można to zrobić w taki sposób jak powyżej - dodajemy obsługę zdarzenia ‘onload’ obiektu obrazka - dopiero gdy ładowanie obrazka się zakończy, obrazek zostanie dodany do “płótna”.

To tyle na temat elementu ‘canvas’ - Powyżej przedstawiłem tylko podstawowe możliwości API tego obiektu. Więcej szczegółów można znaleźć w dokumentacji w serwisie w3schools.com.

Osadzanie grafiki wektorowej

SVG czyli “Scalable Vector Graphics” to sposób opisu grafiki 2D w formacie XML. Opis taki, może być następnie renderowany za pomocą przeglądarki rozumiejącej tak utworzony dokument XML.

Język HTML5, wprowadza znacznik <svg>, umożliwiający osadzanie w jego wnętrzu grafiki wektorowej opisanej za pomocą formatu SVG. Żeby nie tracić czasu, przejdźmy od razu do przykładu:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

Powyższy kod HTML spowoduje wyświetlenie czerwonego okręgu o promieniu 50 pixeli. Atrybuty ‘cx’ i ‘cy’ oznaczają współrzędne środka okręgu (względem obiektu ‘svg’). Jak widać, wygląda to bardzo prosto. Przejdźmy zatem do wyświetlania prostokąta:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" fill="red" />
</svg>

W tym przypadku, narysowany zostanie prostokąt w kolorze czerwonym i wymiarach 300 na 100 pixeli. Kolejny przykład:

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:red"/>
</svg>

Po wykonaniu takiego kodu, przeglądarka wyświetli linię - czerwoną, a jakże ;) Pozostałe atrybuty oznaczają współrzędne punktu początkowego (x1,y1) i końcowego (x2, y2).

Powyższe przykłady pokazują, w jaki sposób umieszczać można w dokumentach HTML5, grafikę wektorową opisaną w formacie SVG. Jego specyfikacja opisuje dużo więcej figur, gradientów, animacji itp. itd. - jeśli ktoś jest zainteresowany to zapraszam do zgłębienia tematu ;)

Obiekt Canvas oraz grafika wektorowa - podsumowanie

To wszystko na dziś. Myślę, że obiekt Canvas oraz grafika wektorowa nie są już dla Ciebie tajemnicą. Zapraszam także na kolejne odcinki przygotowań do egzaminu 70-480!