WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

Wielkość: px

Rozpocząć pokaz od strony:

Download "WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS"

Janusz Głowacki
8 lat temu
Przeglądów:

1 WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch

2 SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas 3. Primitywy, krzywe i ścieżki 4. Przesłanianie 5. Importowanie obrazków, skalowanie, wycinanie 6. Dodawanie tekstu 7. Style I kolory 8. Podstawowe przekształcenia: translacja, rotacja, skalowanie 9. Podstawy animacji

Przesłanianie 5. Importowanie obrazków, skalowanie, wycinanie 6.

3 CZYM JEST CANVAS? <canvas> to znacznik HTML, który umożliwia rysowanie grafiki w locie używając skryptów(z reguły jest to JavaScript). Definiowany w kodzie HTML z użyciem atrybutów: height I width Zawiera wiele metod umożliwiających rysowanie ścieżek, wielokątów, okręgów, znaków, dodawania grafik I wiele innych. Element canvas nie jest wspierany w starszych przeglądarkach. Wymaga co najmniej Firefox 1.5, Opera 9, nowszej wersji Safari lub Internet Explorer 9.

Definiowany w kodzie HTML z użyciem atrybutów: height I width Zawiera wiele metod umożliwiających rysowanie

4 DODANIE ELEMENTU CANVAS DO PLIKU HTML Plik index.html Canvas nie ma właściwości alt ani src jak <img> W implementacji Apple Safari nie jest wymagane zamknięcie znacznika, jednak wymaga tego Firefox.

5 ALTERNATYWNA ZAWARTOŚĆ Gdy przeglądarka nie wspiera elementu <canvas>, wtedy pokazywana jest zawartość znacznika I analogicznie gdy obsługuje zawartość znacznika nie jest pokazywana.

6 DODANIE SKRYPTÓW W sekcji <HEAD> dodajemy plik skryptu js. Tworzymy plik skrypt.js

7 OPIS PLIKU SKRYPT.JS Funkcja anonimowa wywoływana jest w momencie gdy strona zostanie załadowana. Pobieram obiekt będący odwołaniem do elementu canvas z użyciem getelementbyid() Pobieram kontekst rysowania z użyciem funkcji getcontext() Można wykonać specjalne zadania jeśli przeglądarka nie obsługuje elementu canvas.

Pobieram obiekt będący odwołaniem do elementu canvas z użyciem getelementbyid()

8 PODSTAWY RYSOWANIA Prostokąt wypełniony kolorem Punkt (0,0) umieszczony jest w lewym górnym rogu. Oś x rośnie w prawo, a oś y w dół. Wszystkie pozycje umieszczone są relatywnie do położnia (0,0)

9 PRYMITYWY I ŚCIEŻKI Canvas wspiera tylko jeden rodzaj prymitywów prostokąty. Wszystkie pozostałe muszą być stworzone na podstawie linii. Ścieżki z ich pomocą możemy tworzyć inne kształty wymagają rozpoczęcia beginpath() I zakonczenia closepath() pomiędzy znacznikami używamy funkcji lineto(x,y) oraz moveto(x,y).

Ścieżki z ich pomocą możemy tworzyć inne kształty wymagają rozpoczęcia

10 ŚCIEŻKI CIĄG DALSZY Rysowanie okręgu uzywamy polecenia arc()

11 KRZYWE BEZIERA Krzywa Beziera parametryczna krzywa. Posiada dwa punkty kontrolne (P1,P2)

12 PRZESŁANIANIE Możemy ustalić co stanie się, gdy dwa obiekty najdą na siebie. Należy to wpisać przed rysowaniem obiektu. Możliwe efekty przedstawiam na następnej stronie.

13 MOŻLIWE EFEKTY PRZESŁANIANIA

14 DODAWANIE OBRAZKÓW Dodawnie obrazków do canvas przebiega w dwóch krokach. 1. Uzyskujemy obiekt obrazka w JavaScript z użyciem jednej z metod: a. documents.getelemenetsbytagname() b. documents.getelementbyid() c. Wszystkei grafiki dostępne są w zbiorze document.images d. Możemy też zastosować kod JavaScript: 2. Rysujemy obrazek na canvasie z użyciem funkcji drawimage()

getelemenetsbytagname() b. documents.getelementbyid() c.

15 INNE PRZYDATNE RZECZY Po tablicy obrazków można iterować i sprawdzać np. id czy tag z pomocą funkcji getattribute()

16 RYSOWANIE OBRAZKA Wstawienie obrazka na płótno realizujemy z pomocą prostej funkcji: Możemy przekazać funkcji drawimage() czwarty i piąty argument kolejno width i height. Spowoduje to wyskalowanie wstawionego obrazka. Funkcja może również służyć do przycinania obrazka jeśli zastosujemy: sx,sy lewy górny róg źródła swidth,sheight rozmiary źródła dx,dy lewy górny róg wyniku dwidth, dheight rozmiary wynikowe

Spowoduje to wyskalowanie wstawionego obrazka.

17 PRZYKŁAD WYCINANIA Przykład operacji wycinania ze strony Mozilla Developer Network

18 PODSTAWY DODAWANIA TEKSTU Istnieją oczywiście inne metody pozwalające na tworzenie zaawansowanych efektów ale nie omawiam ich w tej prezentacji.

19 STYLE I KOLORY Wczesniej używaliśmy już funkcji fillstyle() oraz strokestyle(). Co jeszcze możemy tej funkcji przekazać? Nazwy kolorów np. blue rgb(255,155,0) rgba(255,15,23,1) zawiera przezroczystość #FFA500 standardowo jak w HTML Jak widać wszystko to jest w cudzysłowach, czyli jest stringiem. Daje nam to potężne możliwości tworzenia takich stringów w locie(string + liczba to string)

blue rgb(255,155,0) rgba(255,15,23,1) zawiera przezroczystość #FFA500 standardowo jak w HTML Jak

20 STYLE I KOLORY CIĄG DALSZY Inne możliwości modyfikowania stylu: linewidth przyjmuje wartość w pikselach odpowiadającą szerokości rysowanej linii. linecap przyjmuje wartości butt, round i square. Definiuje jakie krawędzie przyjmują zakonczenia linii linejoin definiuje jak dwa stykające się obiekty np. linie czy krzywe łączą się. Możliwe typy round, bevel, miter

linecap przyjmuje wartości butt, round i square.

21 PODSTAWY PRZEKSZTAŁCEŃ Czym jest kontekst rysowania? Jest to zbiór wszystkich nadanych styli i transformacji. Stany są trzymane na stosie. Za każdym razem gdy używamy save() obecny stan wrzucany jest na stos. Gdy używamy restore() ustawiany i usuwany ze stosu jest element na jego górze.

22 TRANSLACJA Przemieszcza cały canvas o x,y. Jeśli zachowamy wcześniej stan, będziemy mogli przywrócić dawne położenie.

23 ROTACJA Rotacja płótna wokół obecnego położenia

24 SKALOWANIE Skalować możemy nie tylko obrazki, ale też całe płótno. X to poziomy współczynnik skalowania, a Y pionowy. Wartości większe od 1.0 powiększają, a mniejsze zmniejszają.

25 PODSTAWY ANIMACJI SCHEMAT ANIMACJI W CANVAS 1. Wyczyść płótno 2. Zapisz stan za pomocą metody save() 3. Narysuj stan obrazków w aktualnej klatce czasu 4. Przywróc stan za pomocą metody restore() Do animacji przyda nam się pętla czasu zastosujmy tutaj jedną z metod JavaScript na timer: setinterval wywołuje drawfunction co 100ms settimeout wykonuje funkcję tylko raz po 100 ms, potem trzeba go znowu ustawić.

26 PRZYKŁAD ANIMACJI Z UŻYCIEM TIMERA I TRANSLACJI

27 ŹRÓDŁA HTML 5 Canvas S. Fulton (O Reilly)

28 KONIEC SERDECZNIE DZIĘKUJĘ ZA WYSŁUCHANIE PREZENTACJI!

Podobne dokumenty

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.