prezentacjaInz2

Download Report

Transcript prezentacjaInz2 

WIZUALIZACJA
INFORMACJI TEKSTOWEJ
– WSTĘP DO HTML 5
CANVAS
Autor
prezentacji:
Michał
Kołkowski
Promotor:
prof. dr hab.
Włodzisław
Duch
SPIS TREŚCI
1.
2.
3.
4.
5.
6.
7.
8.
9.
Ogólnie o Canvasie
Utworzenie szablonu do pracy z Canvas
Primitywy, krzywe i ścieżki
Przesłanianie
Importowanie obrazków, skalowanie, wycinanie
Dodawanie tekstu
Style i kolory
Podstawowe przekształcenia: translacja, rotacja, skalowanie
Podstawy animacji
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.
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.
ALTERNAT YWNA ZAWARTOŚĆ
 Gdy przeglądarka nie wspiera elementu <canvas>, wtedy
pokazywana jest zawartość znacznika i analogicznie gdy
obsługuje zawartość znacznika nie jest pokazywana.
Dodanie skryptów
 W sekcji <HEAD> dodajemy plik skryptu js.
 Tworzymy plik skrypt.js
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.
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)
PRYMIT YWY 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 – CIĄG DALSZY
 Rysowanie okręgu – uzywamy polecenia arc()
KRZYWE BEZIERA
 Krzywa Beziera – parametryczna krzywa. Posiada dwa punkty
kontrolne (P1 ,P2)
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.
MOŻLIWE EFEKT Y PRZESŁANIANIA
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.
b.
c.
d.
documents.getElemenetsByTagName()
documents.getElementById()
Wszystkei grafiki dostępne są w zbiorze document.images
Możemy też zastosować kod JavaScript:
2. Rysujemy obrazek na canvasie z użyciem funkcji drawImage()
INNE PRZYDATNE RZECZY
 Po tablicy obrazków można iterować i sprawdzać np. id czy tag
z pomocą funkcji getAttribute()
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
PRZYKŁAD WYCINANIA
 Przykład operacji wycinania ze strony Mozilla Developer
Network
PODSTAWY DODAWANIA TEKSTU
Istnieją oczywiście inne metody pozwalające na tworzenie
zaawansowanych efektów – ale nie omawiam ich w tej
prezentacji.
ST YLE 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)
ST YLE 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’
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.
TRANSLACJA
 Przemieszcza cały canvas o x,y. Jeśli zachowamy wcześniej
stan, będziemy mogli przywrócić dawne położenie.
ROTACJA
 Rotacja płótna wokół obecnego położenia
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ą.
PODSTAWY ANIMACJI
 SCHEMAT ANIMACJI W CANVAS
1.
2.
3.
4.
Wyczyść płótno
Zapisz stan za pomocą metody save()
Narysuj stan obrazków w aktualnej klatce czasu
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ć.
PRZYKŁAD ANIMACJI Z UŻYCIEM TIMERA
I TRANSLACJI
ŹRÓDŁA
 https://developer.mozilla.org/
 http://www.html5canvastutorials.com/
 HTML 5 Canvas – S. Fulton (O’Reilly)
KONIEC
SERDECZNIE DZIĘKUJĘ
ZA
WYSŁUCHANIE PREZENTACJI !