HTML5 Canvas Receptury.pdf

(648 KB) Pobierz
Tytuł oryginału: HTML5 Canvas Cookbook
Tłumaczenie: Piotr Rajca
ISBN: 978-83-246-5075-0
© Helion 2013.
All rights reserved.
Copyright © Packt Publishing 2011.
First published in the English language under the title ‘HTML5 Canvas Cookbook’.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne
i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym
ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również
żadnej odpowiedzialności za ewentualne szkody wynikłe
z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/ht5cre.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/ht5cre
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
Kup książkę
Poleć książkę
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
Spis tre ci
Zespóï oryginalnego wydania
O autorze
O recenzentach
WstÚp
Zagadnienia opisywane w tej ksiÈ ce
Co jest potrzebne podczas lektury tej ksiÈ ki?
Dla kogo jest przeznaczona ta ksiÈ ka?
Czym sÈ elementy canvas wprowadzone w HTML5?
Stosowane konwencje
Pobieranie przykïadowych kodów towarzyszÈcych ksiÈ ce
7
8
9
11
11
13
13
13
14
15
Rozdziaï 1. Wprowadzenie do operacji na cie kach i tekstach
Wprowadzenie
Rysowanie linii
Rysowanie ïuku
Rysowanie krzywej kwadratowej
Rysowanie krzywej Béziera
Rysowanie zygzaków
Rysowanie spirali
Praca z tekstem
Rysowanie trójwymiarowego tekstu z cieniem
Wyzwalanie potÚgi fraktali — rysowanie nawiedzonego drzewa
17
17
18
21
23
25
26
28
30
31
33
Rozdziaï 2. Rysowanie ksztaïtów i elementów zïo onych
Wprowadzenie
Rysowanie prostokÈta
Rysowanie okrÚgu
Tworzenie wïasnych ksztaïtów i stosowanie stylów wypeïnienia
Zabawa z krzywymi Béziera — rysowanie chmurki
37
37
38
40
42
45
Kup książkę
Poleć książkę
Spis tre ci
Rysowanie przezroczystych ksztaïtów
Korzystanie ze stosu stanu kontekstu w celu zapisywania i odtwarzania stylów
Stosowanie operacji zïo onych
Wykorzystanie pÚtli do tworzenia wzorców — rysowanie koïa zÚbatego
Stosowanie warto ci losowych we wïa ciwo ciach ksztaïtów — rysowanie ïÈki kwiatów
Tworzenie funkcji rysujÈcych niestandardowe ksztaïty — talie kart
PoïÈczenie wszystkich wiadomo ci — rysowanie odrzutowca
47
48
51
56
59
62
67
Rozdziaï 3. Praca z obrazami i klipami wideo
Wprowadzenie
Wy wietlanie obrazu
Przycinanie obrazka
Kopiowanie i wklejanie fragmentów obszaru pïótna
Korzystanie z klipów wideo
Pobieranie danych obrazu
Wprowadzenie do manipulowania danymi obrazu — odwracanie kolorów
Odwracanie kolorów w klipach wideo
Konwersja kolorów rysunku na skalÚ szaro ci
Przeksztaïcanie rysunku na postaÊ danych URL
Zapisywanie rysunku w formie obrazu
Wczytywanie zawarto ci rysunku przekazanej w formie danych URL
Wyostrzanie obrazka o powiÚkszonych pikselach
75
75
76
77
80
82
84
87
89
91
93
95
97
99
Rozdziaï 4. Stosowanie przeksztaïceñ
Wprowadzenie
Przesuwanie kontekstu pïótna
Obrót kontekstu pïótna
Skalowanie kontekstu pïótna
Tworzenie odbicia lustrzanego
Tworzenie przeksztaïceñ niestandardowych
Pochylanie kontekstu pïótna
Obsïuga wielu przeksztaïceñ z wykorzystaniem stosu stanu
Przeksztaïcanie okrÚgu na owal
Obracanie obrazka
Rysowanie prostego logo i losowe okre lanie jego poïo enia, obrotu i skali
103
103
104
105
107
109
110
112
113
116
118
119
Rozdziaï 5. O ywianie pïócien poprzez zastosowanie animacji
Wprowadzenie
Tworzenie klasy Animation
Tworzenie ruchu liniowego
Tworzenie przyspieszenia
Tworzenie oscylacji
OscylujÈcy bÈbelek
Ruchome wahadïo
Animowane koïa zÚbate
Animowany zegar
123
124
124
128
130
133
135
137
140
145
4
Kup książkę
Poleć książkę
Spis tre ci
Symulacja fizyki czÈstek
Tworzenie mikroskopijnych yjÈtek
Dziaïanie w warunkach zwiÚkszonego obciÈ enia i prezentowanie liczby ramek na sekundÚ
149
153
157
Rozdziaï 6. Interakcja z elementami canvas
— doïÈczanie procedur obsïugi zdarzeñ do ksztaïtów i regionów
Wprowadzenie
Tworzenie klasy Events
Korzystanie ze wspóïrzÚdnych myszy w obszarze elementu canvas
DoïÈczanie procedur obsïugi zdarzeñ myszy do regionów
DoïÈczanie procedur obsïugi zdarzeñ dotyku do regionów na urzÈdzeniach przeno nych
DoïÈczanie procedur obsïugi zdarzeñ do obrazków
PrzeciÈganie i upuszczanie ksztaïtów
PrzeciÈganie i upuszczanie obrazków
Tworzenie powiÚkszania fragmentu obrazka
Tworzenie aplikacji graficznej
163
164
164
172
174
178
181
185
188
190
196
Rozdziaï 7. Tworzenie grafów i wykresów
Wprowadzenie
Tworzenie wykresu koïowego
Tworzenie wykresu sïupkowego
Wizualizacja równañ
Rysowanie danych punktowych przy u yciu wykresu liniowego
203
203
204
209
216
221
Rozdziaï 8. Ratujemy wiat, piszÈc nowÈ grÚ
Wprowadzenie
Tworzenie arkuszy sprite’ów dla bohatera i jego przeciwników
Tworzenie obrazów poziomów oraz map obszarów
Tworzenie klasy Actor reprezentujÈcej bohatera i jego przeciwników
Tworzenie klasy Level
Klasa HealthBar
Tworzenie klasy Controller
Tworzenie klasy Model
Tworzenie klasy View
Przygotowanie dokumentu HTML i uruchamianie gry
229
229
232
234
238
243
245
246
251
260
265
Rozdziaï 9. Wprowadzenie do WebGL
Wprowadzenie
Tworzenie klasy upraszczajÈcej korzystanie z API WebGL
Rysowanie trójkÈta
Obracanie pïaskiego trójkÈta w przestrzeni trójwymiarowej
Tworzenie obracajÈcego siÚ sze cianu
Dodawanie tekstur i o wietlenia
Tworzenie trójwymiarowego wiata, który mo na eksplorowaÊ
267
267
268
281
283
286
290
296
5
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin