Polub bloga na fejsie!

HTML5 – obiekt Canvas oraz grafika wektorowa

1

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>:

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 poziomu JavaScript’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:

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:

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:

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:

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:

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:

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:

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:

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

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!

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń
Google Analytics Alternative