HTML5 Canvas. Receptury - ebook

HTML5 szturmem zdobywa rynek stron (a w zasadzie już aplikacji) WWW. Co sprawia, że tak się dzieje? Ogrom nowych funkcji, które otwierają przed projektantami nowe możliwości. Usługi geolokalizacyjne, lokalne przechowywanie plików lub obsługa plików multimedialnych to tylko niektóre z nich. Wśród nowości jest również ta jedna wzbudzająca najwięcej emocji — canvas (płótno). Jest to element, który rewolucjonizuje grafikę i wizualizację na stronach WWW.

Dzięki tej książce błyskawicznie zaczniesz korzystać z potencjału elementu canvas. W trakcie lektury poznasz podstawowe możliwości API tego elementu, a wraz z kolejnymi stronami zaczniesz wykorzystywać coraz bardziej zaawansowane techniki tworzenia animacji, wykonywania operacji na obrazach i pisania gier. Rysowanie łuków, przekształcenia i obroty nie będą stanowiły dla Ciebie żadnego problemu. Ponadto w mgnieniu oka opanujesz zasady tworzenia wykresów oraz wizualizacji przestrzennych. Ta książka zasługuje na Twoją szczególną uwagę. Sięgnij po nią i twórz oszałamiające strony w sieci!

Element canvas to:

• nowość w języku HTML5
• nowe możliwości graficzne na Twojej stronie
• efektowna wizualizacja danych
• baza do tworzenia gier dla przeglądarek

Zespół oryginalnego wydania (7)

O autorze (8)

O recenzentach (9)

Wstęp (11)

• Zagadnienia opisywane w tej książce (11)
  
• Co jest potrzebne podczas lektury tej książki? (13)
  
• Dla kogo jest przeznaczona ta książka? (13)
  
• Czym są elementy canvas wprowadzone w HTML5? (13)
  
• Stosowane konwencje (14)
  
• Pobieranie przykładowych kodów towarzyszących książce (15)

Rozdział 1. Wprowadzenie do operacji na ścieżkach i tekstach (17)

• Wprowadzenie (17)
  
• Rysowanie linii (18)
  
• Rysowanie łuku (21)
  
• Rysowanie krzywej kwadratowej (23)
  
• Rysowanie krzywej Béziera (25)
  
• Rysowanie zygzaków (26)
  
• Rysowanie spirali (28)
  
• Praca z tekstem (30)
  
• Rysowanie trójwymiarowego tekstu z cieniem (31)
  
• Wyzwalanie potęgi fraktali - rysowanie nawiedzonego drzewa (33)

Rozdział 2. Rysowanie kształtów i elementów złożonych (37)

• Wprowadzenie (37)
  
• Rysowanie prostokąta (38)
  
• Rysowanie okręgu (40)
  
• Tworzenie własnych kształtów i stosowanie stylów wypełnienia (42)
  
• Zabawa z krzywymi Béziera - rysowanie chmurki (45)
  
• Rysowanie przezroczystych kształtów (47)
  
• Korzystanie ze stosu stanu kontekstu w celu zapisywania i odtwarzania stylów (48)
  
• Stosowanie operacji złożonych (51)
  
• Wykorzystanie pętli do tworzenia wzorców - rysowanie koła zębatego (56)
  
• Stosowanie wartości losowych we właściwościach kształtów - rysowanie łąki kwiatów (59)
  
• Tworzenie funkcji rysujących niestandardowe kształty - talie kart (62)
  
• Połączenie wszystkich wiadomości - rysowanie odrzutowca (67)

Rozdział 3. Praca z obrazami i klipami wideo (75)

• Wprowadzenie (75)
  
• Wyświetlanie obrazu (76)
  
• Przycinanie obrazka (77)
  
• Kopiowanie i wklejanie fragmentów obszaru płótna (80)
  
• Korzystanie z klipów wideo (82)
  
• Pobieranie danych obrazu (84)
  
• Wprowadzenie do manipulowania danymi obrazu - odwracanie kolorów (87)
  
• Odwracanie kolorów w klipach wideo (89)
  
• Konwersja kolorów rysunku na skalę szarości (91)
  
• Przekształcanie rysunku na postać danych URL (93)
  
• Zapisywanie rysunku w formie obrazu (95)
  
• Wczytywanie zawartości rysunku przekazanej w formie danych URL (97)
  
• Wyostrzanie obrazka o powiększonych pikselach (99)

Rozdział 4. Stosowanie przekształceń (103)

• Wprowadzenie (103)
  
• Przesuwanie kontekstu płótna (104)
  
• Obrót kontekstu płótna (105)
  
• Skalowanie kontekstu płótna (107)
  
• Tworzenie odbicia lustrzanego (109)
  
• Tworzenie przekształceń niestandardowych (110)
  
• Pochylanie kontekstu płótna (112)
  
• Obsługa wielu przekształceń z wykorzystaniem stosu stanu (113)
  
• Przekształcanie okręgu na owal (116)
  
• Obracanie obrazka (118)
  
• Rysowanie prostego logo i losowe określanie jego położenia, obrotu i skali (119)

Rozdział 5. Ożywianie płócien poprzez zastosowanie animacji (123)

• Wprowadzenie (124)
  
• Tworzenie klasy Animation (124)
  
• Tworzenie ruchu liniowego (128)
  
• Tworzenie przyspieszenia (130)
  
• Tworzenie oscylacji (133)
  
• Oscylujący bąbelek (135)
  
• Ruchome wahadło (137)
  
• Animowane koła zębate (140)
  
• Animowany zegar (145)
  
• Symulacja fizyki cząstek (149)
  
• Tworzenie mikroskopijnych żyjątek (153)
  
• Działanie w warunkach zwiększonego obciążenia i prezentowanie liczby ramek na sekundę (157)

Rozdział 6. Interakcja z elementami canvas - dołączanie procedur obsługi zdarzeń do kształtów i regionów (163)

• Wprowadzenie (164)
  
• Tworzenie klasy Events (164)
  
• Korzystanie ze współrzędnych myszy w obszarze elementu canvas (172)
  
• Dołączanie procedur obsługi zdarzeń myszy do regionów (174)
  
• Dołączanie procedur obsługi zdarzeń dotyku do regionów na urządzeniach przenośnych (178)
  
• Dołączanie procedur obsługi zdarzeń do obrazków (181)
  
• Przeciąganie i upuszczanie kształtów (185)
  
• Przeciąganie i upuszczanie obrazków (188)
  
• Tworzenie powiększania fragmentu obrazka (190)
  
• Tworzenie aplikacji graficznej (196)

Rozdział 7. Tworzenie grafów i wykresów (203)

• Wprowadzenie (203)
  
• Tworzenie wykresu kołowego (204)
  
• Tworzenie wykresu słupkowego (209)
  
• Wizualizacja równań (216)
  
• Rysowanie danych punktowych przy użyciu wykresu liniowego (221)

Rozdział 8. Ratujemy świat, pisząc nową grę (229)

• Wprowadzenie (229)
  
• Tworzenie arkuszy sprite'ów dla bohatera i jego przeciwników (232)
  
• Tworzenie obrazów poziomów oraz map obszarów (234)
  
• Tworzenie klasy Actor reprezentującej bohatera i jego przeciwników (238)
  
• Tworzenie klasy Level (243)
  
• Klasa HealthBar (245)
  
• Tworzenie klasy Controller (246)
  
• Tworzenie klasy Model (251)
  
• Tworzenie klasy View (260)
  
• Przygotowanie dokumentu HTML i uruchamianie gry (265)

Rozdział 9. Wprowadzenie do WebGL (267)

• Wprowadzenie (267)
  
• Tworzenie klasy upraszczającej korzystanie z API WebGL (268)
  
• Rysowanie trójkąta (281)
  
• Obracanie płaskiego trójkąta w przestrzeni trójwymiarowej (283)
  
• Tworzenie obracającego się sześcianu (286)
  
• Dodawanie tekstur i oświetlenia (290)
  
• Tworzenie trójwymiarowego świata, który można eksplorować (296)

Dodatek A. Wykrywanie obsługi elementów canvas (309)

• Treść zastępcza dla elementów canvas (309)

Dodatek B. Bezpieczeństwo korzystania z elementów canvas (313)

Dodatek C. Dodatkowe zagadnienia (315)

• Elementy canvas a efekty przejść i animacje CSS3 (315)
  
• Wydajność elementów canvas na urządzeniach przenośnych (316)

Skorowidz (317)