Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00272 004587 15180944 na godz. na dobę w sumie
HTML5 Canvas. Receptury - książka
HTML5 Canvas. Receptury - książka
Autor: Liczba stron: 328
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5075-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Ponad 80 receptur prezentujących użycie elementu canvas, które zrewolucjonizują strony WWW!

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:

Gotowe przepisy do wykorzystania na Twojej stronie!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 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 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 7 8 9 11 11 13 13 13 14 15 17 17 18 21 23 25 26 28 30 31 33 37 37 38 40 42 45 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 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 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 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 4 47 48 51 56 59 62 67 75 75 76 77 80 82 84 87 89 91 93 95 97 99 103 103 104 105 107 109 110 112 113 116 118 119 123 124 124 128 130 133 135 137 140 145 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Ú 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 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 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 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Ê 149 153 157 163 164 164 172 174 178 181 185 188 190 196 203 203 204 209 216 221 229 229 232 234 238 243 245 246 251 260 265 267 267 268 281 283 286 290 296 5 Spis treĞci Dodatek A. Wykrywanie obsïugi elementów canvas TreĂÊ zastÚpcza dla elementów canvas Dodatek B. Bezpieczeñstwo korzystania z elementów canvas Dodatek C. Dodatkowe zagadnienia Elementy canvas a efekty przejĂÊ i animacje CSS3 WydajnoĂÊ elementów canvas na urzÈdzeniach przenoĂnych Skorowidz 309 309 313 315 315 316 317 6 1 Wprowadzenie do operacji na Ăcieĝkach i tekstach W tym rozdziale zostanÈ opisane nastÚpujÈce zagadnienia: Q rysowanie linii, Q rysowanie ïuków, Q rysowanie krzywych kwadratowych, Q rysowanie krzywych Béziera, Q rysowanie zygzaków, Q rysowanie spiral, Q praca z tekstem, Q rysowanie trójwymiarowych tekstów z cieniem, Q wyzwolenie potÚgi fraktali — rysowanie nawiedzonego drzewa. Wprowadzenie Celem tego rozdziaïu jest przedstawienie najwaĝniejszych moĝliwoĂci elementów canvas wpro- wadzonych w jÚzyku HTML5 (nazywanych takĝe „pïótnem”). MoĝliwoĂci te zostanÈ zademon- strowane w serii coraz bardziej zïoĝonych przykïadów. API — interfejs programowania aplikacji — elementów canvas dostarcza podstawowych narzÚdzi niezbÚdnych do rysowania i okreĂlania HTML5 Canvas. Receptury wyglÈdu (stylu) róĝnych typów podĂcieĝek, takich jak linie, ïuki, krzywe kwadratowe, krzywe Bé- ziera, oraz do ïÈczenia ich w celu tworzenia Ăcieĝek. Interfejs ten zapewnia takĝe peïne wsparcie dla rysowania tekstów, udostÚpniajÈc przy tym kilka wïaĂciwoĂci pozwalajÈcych na okreĂlanie ich stylu. Zaczynajmy! Rysowanie linii Podczas rozpoczynania nauki korzystania z pïócien HTML5 wiÚkszoĂÊ osób jest zainteresowana rysowaniem podstawowych elementów. Ta receptura pokazuje, jak narysowaÊ liniÚ. Jak to zrobiÊ Aby narysowaÊ fragment pochyïej linii prostej, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d (dwuwymiarowy) pïótna i okreĂliÊ styl linii: window.onload = function(){ // pobranie elementu canvas na podstawie jego identyfikatora var canvas = document.getElementById( myCanvas ); // deklaracja kontekstu 2D przy uĪyciu metody getContext() obiektu canvas var context = canvas.getContext( 2d ); // ustawienie szerokoĞci linii na 10 pikseli context.lineWidth = 10; // ustawienie koloru linii na niebieski context.strokeStyle = blue ; 2. UmiejscowiÊ kontekst pïótna i narysowaÊ liniÚ: // ustawienie poáoĪenia kursora context.moveTo(50, canvas.height - 50); // rysowanie linii context.lineTo(canvas.width - 50, 50); // wyĞwietlenie linii przy wykorzystaniu wybranego wczeĞniej koloru context.stroke(); }; 18 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Pobieranie kodów przykïadów Zarówno kody przykïadów, jak i inne zasoby moĝna pobraÊ z serwera FTP wydawnictwa Helion — ftp://ftp.helion.pl/przyklady/ht5cre.zip. Jak to dziaïa Jak widaÊ na powyĝszym przykïadzie, zanim bÚdzie moĝna odwoïaÊ siÚ do elementu canvas na podstawie jego identyfikatora, naleĝy poczekaÊ na wczytanie caïej strony. Moĝna to zrobiÊ, uĝywajÈc inicjalizatora window.onload. Po zakoñczeniu wczytywania strony moĝna juĝ odwoïaÊ siÚ do ele- mentu canvas w drzewie DOM strony, uĝywajÈc w tym celu metody document.getElementById(), a nastÚpnie zdefiniowaÊ dwuwymiarowy (2d) kontekst pïótna, przekazujÈc parametr 2d w wy- woïaniu metody getContext() obiektu canvas. W ostatnich dwóch rozdziaïach ksiÈĝki pokaza- no, ĝe moĝna tworzyÊ takĝe konteksty trójwymiarowe. W tym przypadku w wywoïaniu metody getContext() naleĝy przekazaÊ parametr webgl , experimental-webgl bÈdě jeszcze inny. Podczas rysowania konkretnego elementu, takiego jak Ăcieĝka, podĂcieĝka lub ksztaït, koniecz- nie naleĝy pamiÚtaÊ o tym, ĝe jego styl moĝna zmieniÊ w kaĝdej chwili — zarówno przed rozpo- czÚciem, jak i po zakoñczeniu rysowania — aby styl jednak zostaï uwzglÚdniony, trzeba go za- stosowaÊ bezpoĂrednio po narysowaniu elementu. GruboĂÊ linii moĝna okreĂliÊ przy uĝyciu wïaĂciwoĂci lineWidth, a jej kolor przy zastosowaniu wïaĂciwoĂci strokeStyle. Moĝna uznaÊ, ĝe te czynnoĂci przypominajÈ rysowanie na kartce papieru — zanim zaczniemy rysowaÊ, wybieramy kredkÚ (strokeStyle) o okreĂlonej gruboĂci (lineWidth). Kiedy juĝ weěmiemy do rÚki kredkÚ, moĝemy umieĂciÊ jÈ w dowolnym miejscu (punkcie rozpo- czÚcia rysowania). Do tego celu sïuĝy metoda moveTo(): context.moveTo(x,y); Kontekst pïótna moĝna sobie wyobraziÊ jako kursor sïuĝÈcy do rysowania. Metoda moveTo() tworzy nowÈ podĂcieĝkÚ w okreĂlonym punkcie. Lewy górny wierzchoïek pïótna ma wspóïrzÚdne (0,0), natomiast wspóïrzÚdne prawego dolnego wierzchoïka to szerokoĂÊ i wysokoĂÊ elementu canvas. Po umieszczeniu kursora rysujÈcego w okreĂlonym punkcie moĝemy narysowaÊ liniÚ, uĝywajÈc metody lineTo(), w której wywoïaniu przekazywane sÈ wspóïrzÚdne punktu koñcowego: context.lineTo(x,y); 19 HTML5 Canvas. Receptury I w koñcu, aby linia staïa siÚ widoczna, trzeba wywoïaÊ metodÚ stroke(). JeĂli przed narysowa- niem linii nie wybierzemy innego koloru, to domyĂlnie bÚdzie ona miaïa kolor czarny. Poniĝej przedstawiono podstawowÈ procedurÚ, jakÈ naleĝy wykonaÊ w celu narysowania linii przy uĝyciu API elementów canvas: 1. OkreĂlenie stylu linii (odpowiadajÈce wybraniu kredki o danej gruboĂci). 2. Umieszczenie kontekstu pïótna w wybranym miejscu przy uĝyciu metody moveTo() (odpowiadajÈce umieszczeniu kredki w danym miejscu kartki papieru). 3. Narysowanie linii poprzez wywoïanie metody lineTo(). 4. WyĂwietlenie linii za poĂrednictwem wywoïania metody stroke(). Dodatkowe informacje Rysowane linie mogÈ mieÊ trzy róĝne rodzaje zakoñczeñ: butt (prostokÈtne), round (okrÈgïe) oraz square (kwadratowe). Styl zakoñczeñ moĝna okreĂlaÊ przy uĝyciu wïaĂciwoĂci lineCap kontekstu pïótna. DomyĂlnie stosowane jest zakoñczenie butt. Wszystkie trzy style zakoñczeñ zostaïy przedstawione na poniĝszym rysunku. Na samej górze widoczny jest domyĂlny styl zakoñczeñ — butt; ĂrodkowÈ liniÚ narysowano przy wykorzystaniu stylu zakoñczeñ round, a najniĝszÈ — przy zastosowaniu stylu square. Naleĝy zwróciÊ uwagÚ, ĝe Ărodkowa i dolna linia sÈ nieco dïuĝsze od górnej, choÊ ich dïugoĂci sÈ takie same. Dzieje siÚ tak dlatego, ĝe w przypadku zastosowania stylu round oraz square zakoñ- czenia linii powiÚkszajÈ jej dïugoĂÊ o wartoĂÊ równÈ jej szerokoĂci. JeĂli rysujemy na przykïad liniÚ o dïugoĂci 200 pikseli i szerokoĂci 10 pikseli i zastosujemy przy tym styl zakoñczeñ round, to ostateczna dïugoĂÊ linii wyniesie 210 pikseli, gdyĝ kaĝde z jej zakoñczeñ powiÚkszy jej dïugoĂÊ o 5 pikseli. Patrz takĝe Q „Rysowanie zygzaków”. Q „PoïÈczenie wszystkich wiadomoĂci — rysowanie odrzutowca” w rozdziale 2. 20 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach Rysowanie ïuku Czasami moĝe siÚ pojawiÊ koniecznoĂÊ narysowania idealnego ïuku. Ta receptura moĝe siÚ przy- daÊ, jeĂli chcemy narysowaÊ radosnÈ tÚczÚ, uĂmiechniÚtÈ buěkÚ lub jakieĂ diagramy. Jak to zrobiÊ Aby narysowaÊ ïuk, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna i okreĂliÊ styl ïuku: window.onload = function(){ var canvas = document.getElementById( myCanvas ); var context = canvas.getContext( 2d ); context.lineWidth = 15; context.strokeStyle = black ; // kolor linii 2. NarysowaÊ ïuk: context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 * Math.PI, ´1.9 * Math.PI, false); context.stroke(); }; 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Do narysowania ïuku, zdefiniowanego jako fragment umownego okrÚgu, sïuĝy metoda arc(). Przyjrzyjmy siÚ nastÚpujÈcemu diagramowi: 21 HTML5 Canvas. Receptury Umowny okrÈg jest definiowany przy uĝyciu punktu stanowiÈcego jego Ărodek i promienia. Z kolei rysowany fragment okrÚgu definiujemy, podajÈc parÚ kÈtów — poczÈtkowy i koñcowy — oraz informacjÚ, czy ïuk ma byÊ rysowany zgodnie z kierunkiem ruchu wskazówek zegara, czy w kierunku przeciwnym. context.arc( srodekX, srodekY, promien, katPoczatkowy, katKoncowy, przeciwnieDoRuchuWskazowekZegara); Trzeba pamiÚtaÊ, ĝe kÈty zaczynajÈ siÚ od wartoĂci 0ʌ z prawej strony okrÚgu i zmieniajÈ siÚ w kierunku zgodnym z kierunkiem ruchu wskazówek zegara, poprzez wartoĂci 3ʌ/2, ʌ, ʌ/2, z powrotem do 0. W tym przykïadzie zastosowaliĂmy kÈt poczÈtkowy o wartoĂci 1,1ʌ oraz kÈt koñcowy o wartoĂci 1,9ʌ. Oznacza to, ĝe kÈt poczÈtkowy znajduje siÚ nieco powyĝej Ărodka, z le- wej strony umownego okrÚgu, a kÈt koñcowy — nieco powyĝej Ărodka, z prawej strony okrÚgu. Dodatkowe informacje WartoĂci kÈta poczÈtkowego i koñcowego nie muszÈ wcale zawieraÊ siÚ w zakresie od 0ʌ do 2ʌ — mogÈ to byÊ dowolne liczby rzeczywiste, gdyĝ nic nie stoi na przeszkodzie, by kÈty zacho- dziïy na siebie. Zaïóĝmy, ĝe kÈt poczÈtkowy wynosi 3ʌ. Odpowiada to jednemu peïnemu obrotowi wokóï okrÚgu (2ʌ) oraz poïowie kolejnego obrotu (1ʌ). Innymi sïowy, wartoĂÊ 3ʌ jest odpowiednikiem wartoĂci 1ʌ. I jeszcze jeden przykïad — wartoĂÊ –3ʌ takĝe jest odpowiednikiem wartoĂci 1ʌ, gdyĝ w tym przypadku kÈt zatoczy jeden peïny obrót i dodatkowe póï obrotu wokóï okrÚgu, w kie- runku przeciwnym do kierunku ruchu wskazówek zegara, i ostatecznie znajdzie siÚ w poïoĝeniu odpowiadajÈcym wartoĂci kÈtowi 1ʌ. Innym sposobem rysowania ïuków w elemencie canvas jest uĝycie metody arcTo(). W tym przypadku ïuk definiowany jest na podstawie punktu kontekstu, punktu kontrolnego oraz promienia. context.arcTo(punktKontrolnyX1, punktKontrolnyY1, punktKoncowyX, punktKoncowyY, ´promien); 22 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach W odróĝnieniu od metody arc(), która rysuje okrÈg wokóï okreĂlonego Ărodka, metoda arcTo() zaleĝy od punktu kontekstu, przez co jest nieco podobna do metody lineTo(). Metoda arcTo() jest najczÚĂciej uĝywana do tworzenia zaokrÈglonych wierzchoïków podczas rysowania Ăcieĝek i ksztaïtów. Patrz takĝe Q „Rysowanie okrÚgu” w rozdziale 2. Q „Animowane koïa zÚbate” w rozdziale 5. Q „Animowany zegar” w rozdziale 5. Rysowanie krzywej kwadratowej W tej recepturze wyjaĂniono, jak rysowaÊ krzywe kwadratowe. Krzywe tego typu zapewniajÈ znacznie wiÚkszÈ elastycznoĂÊ i pozwalajÈ na rysowanie krzywizn bardziej naturalnych od swych kuzynów ïuków i doskonale nadajÈ siÚ do tworzenia dowolnych ksztaïtów. Jak to zrobiÊ Aby narysowaÊ krzywÈ kwadratowÈ, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna: window.onload = function(){ var canvas = document.getElementById( myCanvas ); var context = canvas.getContext( 2d ); context.lineWidth = 10; context.strokeStyle = black ; // kolor linii 2. Odpowiednio umieĂciÊ punkt kontekstu i narysowaÊ krzywÈ kwadratowÈ: context.moveTo(100, canvas.height - 50); context.quadraticCurveTo(canvas.width / 2, -50, canvas.width 23 HTML5 Canvas. Receptury - 100, canvas.height - 50); context.stroke(); }; 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Krzywe kwadratowe rysowane w elemencie canvas sÈ definiowane przez punkt kontekstu, punkt kontrolny oraz punkt koñcowy: context.quadraticCurveTo(kontrolnyX,kontrolnyY,punktKocowyX,punktKoncowyY); Przeanalizujmy nastÚpujÈcy diagram: Krzywizna krzywej tego typu jest styczna do trzech stycznych charakterystycznych. W swojej pierwszej czÚĂci krzywa kwadratowa jest styczna do umownej prostej przechodzÈcej przez punkt kontekstu i punkt kontrolny. W szczytowym miejscu wygiÚcia krzywa jest styczna do umownej prostej przechodzÈcej przez dwa punkty Ărodkowe — punkt¥rodkowy1 oraz punkt¥rodkowy2. W swojej koñcowej czÚĂci krzywa jest styczna do umownej prostej przechodzÈcej przez punkty kontrolny i koñcowy. Patrz takĝe Q „PoïÈczenie wszystkich wiadomoĂci — rysowanie odrzutowca” w rozdziale 2. Q „Wyzwolenie potÚgi fraktali — rysowanie nawiedzonego drzewa”. 24 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach Rysowanie krzywej Béziera JeĂli krzywa kwadratowa nie zaspokaja naszych potrzeb, to byÊ moĝe zrobi to krzywa Béziera. Krzywe Béziera, nazywane takĝe krzywymi szeĂciennymi, sÈ najbardziej zaawansowanym ro- dzajem krzywych dostÚpnych w API elementach canvas. Jak to zrobiÊ Aby narysowaÊ krzywÈ Béziera, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna: window.onload = function(){ var canvas = document.getElementById( myCanvas ); var context = canvas.getContext( 2d ); context.lineWidth = 10; context.strokeStyle = black ; // kolor linii context.moveTo(180, 130); 2. Odpowiednio umieĂciÊ punkt kontekstu i narysowaÊ krzywÈ kwadratowÈ: context.bezierCurveTo(150, 10, 420, 10, 420, 180); context.stroke(); }; 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Krzywe Béziera rysowane w elementach canvas sÈ definiowane przez punkt kontekstu, dwa punkty kontrolne oraz punkt koñcowy. Dodatkowy punkt kontrolny zapewnia znacznie wiÚkszÈ kontrolÚ nad postaciÈ krzywizny, niĝ byïo to moĝliwe w przypadku krzywych kwadratowych: context.bezierCurveTo(punktKontrolnyX1, punktKontrolnyY1, punktKontrolnyX2, ´punktKontrolnyY2, punktKoncowyX, punktKoncowyY); 25 HTML5 Canvas. Receptury Przeanalizujmy nastÚpujÈcy diagram: W odróĝnieniu od krzywych kwadratowych, definiowanych przez trzy styczne charakterystyczne, krzywe Béziera sÈ definiowane przez piÚÊ stycznych. Pierwsza, poczÈtkowa czÚĂÊ krzywej jest styczna do umownej prostej przechodzÈcej przez punkt kontekstu i pierwszy punkt kontrolny. Kolejna czÚĂÊ krzywej jest styczna do umownej prostej przechodzÈcej przez punkt¥rodkowy1 oraz punkt¥rodkowy3. Wierzchoïek krzywizny jest styczny do umownej prostej przechodzÈcej przez punkt¥rodkowy2 i punkt¥rodkowy4. Czwarta czÚĂÊ krzywej jest styczna do umownej pro- stej przechodzÈcej przez punkt¥rodkowy3 oraz punkt¥rodkowy5. Ostatnia czÚĂÊ krzywej jest styczna do umownej prostej przechodzÈcej przez drugi punkt kontrolny i punkt koñcowy. Patrz takĝe Q „Stosowanie wartoĂci losowych we wïaĂciwoĂciach ksztaïtów — rysowanie pola kwiatów” w rozdziale 2. Q „PoïÈczenie wszystkich wiadomoĂci — rysowanie odrzutowca” w rozdziale 2. Rysowanie zygzaków Ta receptura przedstawia sposób rysowania Ăcieĝki, która powstanie z poïÈczenia podĂcieĝek i utworzy ïamanÈ — zygzak. 26 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach Jak to zrobiÊ Aby narysowaÊ ïamanÈ, naleĝy wykonaÊ nastÚpujÈce operacje: 1. ZdefiniowaÊ kontekst 2d pïótna: window.onload = function(){ var canvas = document.getElementById( myCanvas ); var context = canvas.getContext( 2d ); var startX = 85; var startY = 70; var zigzagSpacing = 60; 2. OkreĂliÊ styl ïamanej i rozpoczÈÊ rysowanie Ăcieĝki: context.lineWidth = 10; context.strokeStyle = #0096FF ; // kolor niebieskawy context.beginPath(); context.moveTo(startX, startY); 3. NarysowaÊ siedem ïÈczÈcych siÚ odcinków i wyĂwietliÊ ĂcieĝkÚ, wywoïujÈc metodÚ stroke(): // rysowanie siedmiu linii prostych for (var n = 0; n 7; n++) { var x = startX + ((n + 1) * zigzagSpacing); var y; if (n 2 == 0) { // jeĞli n jest parzyste y = startY + 100; } else { // jeĞli n jest nieparzyste y = startY; } context.lineTo(x, y); } context.stroke(); } 4. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Aby narysowaÊ zygzak, naleĝy poïÈczyÊ ze sobÈ kilka ukoĂnych linii, tworzÈc w ten sposób ĂcieĝkÚ. Moĝna to zrobiÊ przy uĝyciu pÚtli, w której w nieparzystych iteracjach bÚdzie rysowana linia ukoĂna skierowana w dóï i w prawo, a w iteracjach parzystych — linia ukoĂna skierowana w górÚ i w prawo. 27 HTML5 Canvas. Receptury Najwaĝniejszym aspektem jest tu metoda beginPath(). Jej wywoïanie deklaruje poczÈtek ry- sowania Ăcieĝki. DziÚki temu koniec kaĝdej linii — podĂcieĝki — bÚdzie definiowaï poczÈtek kolejnej podĂcieĝki. W razie pominiÚcia wywoïania tej metody trzeba by przy uĝyciu metody moveTo() mozolnie umieszczaÊ punkt kontekstu pïótna przed rozpoczÚciem rysowania kaĝdej linii, by zapewniÊ, ĝe poczÈtek kaĝdej kolejnej rysowanej linii bÚdzie siÚ pokrywaï z koñcem poprzedniej. Wywoïanie metody beginPath() jest takĝe konieczne w przypadku tworzenia ksztaïtów, o czym mowa w nastÚpnym rozdziale. Style poïÈczeñ linii Warto zwróciÊ uwagÚ na to, ĝe poïÈczenia pomiÚdzy kolejnymi segmentami rysowanego zyg- zaka sÈ spiczaste. Wynika to z tego, ĝe domyĂlnym stylem poïÈczeñ linii w pïótnach HTML5 jest miter. KorzystajÈc z wïaĂciwoĂci lineJoin kontekstu pïótna, moĝna takĝe zmieniÊ styl poïÈczeñ na round (poïÈczenia zaokrÈglone) lub bevel (poïÈczenia ukoĂne). JeĂli ïÈczone segmenty linii sÈ stosunkowo cienkie i nie ïÈczÈ siÚ pod ostrymi kÈtami, to zauwaĝe- nie jakichkolwiek róĝnic pomiÚdzy poszczególnymi stylami poïÈczeñ moĝe byÊ trudne. Zazwy- czaj róĝnice pomiÚdzy nimi stajÈ siÚ wyraěne przy liniach, których gruboĂÊ przekracza 5 pikseli, a kÈty pomiÚdzy nimi sÈ stosunkowo niewielkie. Rysowanie spirali Uwaga — ta receptura moĝe dziaïaÊ hipnotycznie. W tym przykïadzie narysujemy spiralÚ — ĂcieĝkÚ skïadajÈcÈ siÚ z sekwencji krótkich linii. Jak to zrobiÊ Aby narysowaÊ spiralÚ o okreĂlonym punkcie centralnym, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna i zainicjowaÊ parametry spirali: window.onload = function(){ var canvas = document.getElementById( myCanvas ); 28 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach var context = canvas.getContext( 2d ); var radius = 0; var angle = 0; 2. OkreĂliÊ styl rysowanej spirali: context.lineWidth = 10; context.strokeStyle = #0096FF ; // kolor niebieskawy context.beginPath(); context.moveTo(canvas.width / 2, canvas.height / 2); 3. ZatoczyÊ trzy peïne obroty wokóï punktu centralnego (przy czym na kaĝdy obrót bÚdzie przypadaÊ po 50 segmentów linii). Kaĝdy segment bÚdzie rysowany przy uĝyciu metody lineTo(), od koñca poprzedniego segmentu do aktualnie wyznaczonego punktu, przy czym za kaĝdym razem promieñ bÚdzie zwiÚkszany o 0.75. Po zakoñczeniu trzech peïnych obrotów spirala zostanie wyĂwietlona poprzez wywoïanie metody stroke(): for (var n = 0; n 150; n++) { radius += 0.75; // peány obrót bĊdzie siĊ skáadaá z 50 iteracji angle += (Math.PI * 2) / 50; var x = canvas.width / 2 + radius * Math.cos(angle); var y = canvas.height / 2 + radius * Math.sin(angle); context.lineTo(x, y); } context.stroke(); }; 4. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Aby narysowaÊ w elemencie canvas spiralÚ, moĝemy umieĂciÊ kursor w jego Ărodku, a nastÚpnie narysowaÊ sekwencjÚ bardzo krótkich linii, zwiÚkszajÈc przy tym kÈt i odlegïoĂÊ od punktu cen- tralnego, przy czym kaĝda kolejna linia bÚdzie siÚ zaczynaÊ w punkcie zakoñczenia poprzedniej. AnalizujÈc ten algorytm rysowania, moĝna wyobraziÊ sobie, ĝe jesteĂmy dzieckiem, które stoi na chodniku z kawaïkiem kredy w rÚce. Pochylamy siÚ, przykïadamy kredÚ do chodnika i zaczynamy krÚciÊ siÚ w koïo (nie za szybko, chyba ĝe chcemy, by siÚ nam zakrÚciïo w gïowie). Podczas krÚ- cenia siÚ odsuwamy kredÚ coraz dalej od siebie. Po kilku obrotach okaĝe siÚ, ĝe narysowaliĂmy ĂlicznÈ, maïÈ spiralÚ. 29 HTML5 Canvas. Receptury Praca z tekstem Niemal wszystkie aplikacje korzystajÈ z wyĂwietlania tekstów, by efektywnie przekazywaÊ infor- macje uĝytkownikom. Ta receptura pokazuje, jak wyĂwietliÊ w elemencie canvas optymistyczne powitanie. Jak to zrobiÊ Aby wyĂwietliÊ na pïótnie tekst, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna i okreĂliÊ styl prezentowanego tekstu: window.onload = function(){ var canvas = document.getElementById( myCanvas ); var context = canvas.getContext( 2d ); context.font = 40pt Calibri ; context.fillStyle = black ; 2. WyrównaÊ tekst w poziomie i w pionie, a nastÚpnie go wyĂwietliÊ: // wyĞrodkowanie tekstu w poziomie context.textAlign = center ; // wyĞrodkowanie tekstu w pionie context.textBaseline = middle ; context.fillText( Witaj, Ăwiecie! , canvas.width / 2, 120); }; 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Gdy wyĂwietlamy tekst w elemencie canvas, moĝemy zdefiniowaÊ styl oraz wielkoĂÊ czcionki (wïaĂciwoĂÊ font), kolor czcionki (wïaĂciwoĂÊ fillStyle), wyrównanie tekstu w poziomie (wïa- ĂciwoĂÊ textAlign) i w pionie (wïaĂciwoĂÊ textBaseline). WïaĂciwoĂci textAlign moĝna przypi- saÊ wartoĂci left, center bÈdě right, a wïaĂciwoĂci textBaseline wartoĂci top, hanging, middle, alphabetic, ideographic lub bottom. DomyĂlnÈ wartoĂciÈ wïaĂciwoĂci textAlign jest left, nato- miast wïaĂciwoĂci textBaseline — alphabetic. 30 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach Dodatkowe informacje Oprócz metody fillText() API elementów canvas udostÚpnia metodÚ strokeText(): context.strokeText( Witaj, Ăwiecie! , x, y); Metoda ta nie wyĂwietla samego tekstu, lecz wypeïnia zajmowany przez niego obszar okreĂlonym kolorem. Aby wyĂwietliÊ tekst i jednoczeĂnie wypeïniÊ kolorem zajmowany przez niego obszar, na- leĝy wywoïaÊ zarówno metodÚ fillText(), jak i strokeText(). Aby tekst miaï odpowiedniÈ wielkoĂÊ, w pierwszej kolejnoĂci naleĝy wywoïaÊ metodÚ fillText(), a dopiero po niej metodÚ strokeText(). Patrz takĝe Q „Rysowanie trójwymiarowego tekstu z cieniem”. Q „Tworzenie odbicia lustrzanego” w rozdziale 4. Q „Rysowanie prostego logo i losowe okreĂlanie jego poïoĝenia, obrotu oraz skali” w rozdziale 4. Rysowanie trójwymiarowego tekstu z cieniem Osoby, które uwaĝajÈ, ĝe zwyczajne, dwuwymiarowe teksty nie sÈ szczególnie atrakcyjne, zainte- resujÈ siÚ zapewne rysowaniem tekstów trójwymiarowych. ChoÊ API elementów canvas nie zapewnia bezpoĂrednio moĝliwoĂci rysowania takich tekstów, to jednak korzystajÈc z tego API, stosunkowo ïatwo moĝna samodzielnie utworzyÊ funkcjÚ draw3dText(). Jak to zrobiÊ Aby narysowaÊ trójwymiarowy tekst, naleĝy wykonaÊ nastÚpujÈce czynnoĂci: 1. ZdefiniowaÊ kontekst 2d pïótna i okreĂliÊ styl prezentowanego tekstu: window.onload = function(){ var canvas = document.getElementById( myCanvas ); 31 HTML5 Canvas. Receptury var context = canvas.getContext( 2d ); context.font = 40pt Calibri ; context.fillStyle = black ; 2. OkreĂliÊ wyrównanie i wyĂwietliÊ trójwymiarowy tekst: // wyĞrodkowanie tekstu w poziomie context.textAlign = center ; // wyĞrodkowanie tekstu w pionie context.textBaseline = middle ; draw3dText(context, Witaj, Ăwiecie 3D! , canvas.width / 2, 120, 5); }; 3. ZdefiniowaÊ funkcjÚ draw3dText(), która bÚdzie tworzyÊ kilka warstw tekstu i dodawaÊ do niego cieñ: function draw3dText(context, text, x, y, textDepth){ var n; // rysowanie dolnych warstw for (n = 0; n textDepth; n++) { context.fillText(text, x - n, y - n); } // rysowanie górnej warstwy z cieniem rzucanym na // warstwy niĪsze context.fillStyle = #5E97FF ; context.shadowColor = black ; context.shadowBlur = 10; context.shadowOffsetX = textDepth + 2; context.shadowOffsetY = textDepth + 2; context.fillText(text, x - n, y - n); } 4. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas Jak to dziaïa Aby narysowaÊ trójwymiarowy tekst w elemencie canvas, moĝna wyĂwietliÊ kilka nieznacznie przesuniÚtych wzglÚdem siebie warstw zawierajÈcych ten sam tekst, tworzÈc w ten sposób imitacjÚ gïÚbi. W tej recepturze gïÚbokoĂÊ tekstu wynosi 5, co oznacza, ĝe nasza funkcja draw3dText() piÚÊ razy wyĂwietli tekst Witaj, Ăwiecie 3D!, za kaĝdym razem nieznacznie go przesuwajÈc. Te dodatkowe warstwy tekstu zostanÈ wyĂwietlone na czarno, by zapewniÊ imitacjÚ gïÚbi. 32 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach NastÚpnie dodamy kolorowÈ, wierzchniÈ warstwÚ. OstatniÈ operacjÈ jest dodanie rozmytego cienia poniĝej tekstu, co moĝna zrobiÊ poprzez przypisanie odpowiednich wartoĂci wïaĂciwoĂciom shadowColor, shadowBlur, shadowOffsetX i shadowOffsetY kontekstu pïótna. WïaĂciwoĂci te moĝna stosowaÊ nie tylko przy wyĂwietlaniu tekstów, lecz takĝe podĂcieĝek, Ăcieĝek i ksztaïtów, o czym bÚdzie jeszcze mowa w dalszej czÚĂci ksiÈĝki. Wyzwalanie potÚgi fraktali — rysowanie nawiedzonego drzewa Czym sÈ fraktale? Moĝna powiedzieÊ, ĝe sÈ one poïÈczeniem matematyki ze sztukÈ. Znajdziemy je we wszelkiego rodzaju wzorcach wystÚpujÈcych w naturze. Pod wzglÚdem algorytmicznym fraktale sÈ równaniami wykorzystujÈcymi rekurencjÚ. W tej recepturze narysujemy naturalnie wyglÈdajÈce drzewo, zaczynajÈce siÚ od pnia rozdzielajÈcego siÚ na dwa konary, z których kaĝdy nastÚpnie rozdziela siÚ na dwie gaïÚzie. Po dwunastu takich powtórzeniach uzyskamy rozïoĝyste, pozornie chaotyczne drzewo z masÈ konarów i gaïÈzek. Jak to zrobiÊ Oto czynnoĂci, jakie naleĝy wykonaÊ, aby narysowaÊ drzewo, korzystajÈc z fraktali: 1. UtworzyÊ rekurencyjnÈ funkcjÚ, która bÚdzie rysowaÊ jednÈ gaïÈě, rozdzielajÈcÈ siÚ na dwie mniejsze gaïÚzie; nastÚpnie funkcja bÚdzie wywoïywaÊ rekurencyjnie samÈ siebie, by narysowaÊ te dwie gaïÚzie, zaczynajÈc od ich punktów koñcowych: 33 HTML5 Canvas. Receptury function drawBranches(context, startX, startY, trunkWidth, level){ if (level 12) { var changeX = 100 / (level + 1); var changeY = 200 / (level + 1); var topRightX = startX + Math.random() * changeX; var topRightY = startY - Math.random() * changeY; var topLeftX = startX - Math.random() * changeX; var topLeftY = startY - Math.random() * changeY; // rysowanie prawej gaáĊzi context.beginPath(); context.moveTo(startX + trunkWidth / 4, startY); context.quadraticCurveTo(startX + trunkWidth / ´4, startY - trunkWidth, topRightX, topRightY); context.lineWidth = trunkWidth; context.lineCap = round ; context.stroke(); // rysowanie lewej gaáĊzi context.beginPath(); context.moveTo(startX - trunkWidth / 4, startY); context.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth, topLeftX, topLeftY); context.lineWidth = trunkWidth; context.lineCap = round ; context.stroke(); drawBranches(context, topRightX, topRightY, trunkWidth * 0.7, level + 1); drawBranches(context, topLeftX, topLeftY, trunkWidth * 0.7, level + 1); } } 2. ZainicjowaÊ kontekst pïótna i rozpoczÈÊ rysowanie fraktala drzewa poprzez wywoïanie funkcji drawBranches(): window.onload = function(){ canvas = document.getElementById( myCanvas ); context = canvas.getContext( 2d ); drawBranches(context, canvas.width / 2, canvas.height, 50, 0); }; 3. UmieĂciÊ element canvas w treĂci dokumentu HTML: canvas id= myCanvas width= 600 height= 250 style= border:1px solid black; /canvas 34 Rozdziaá 1. • Wprowadzenie do operacji na ĞcieĪkach i tekstach Jak to dziaïa Aby narysowaÊ drzewo przy uĝyciu fraktala, naleĝy przygotowaÊ rekurencyjnÈ funkcjÚ, która zdefiniuje matematycznÈ naturÚ drzewa. JeĂli poĂwiÚcimy chwilÚ na przestudiowanie wyglÈ- du drzew (gdy to zrobimy, okaĝe siÚ, ĝe sÈ naprawdÚ piÚkne), zauwaĝymy, ĝe wszystkie ich gaïÚ- zie rozdzielajÈ siÚ na mniejsze gaïÈzki. Oznacza to, ĝe nasza rekurencyjna funkcja powinna ryso- waÊ jednÈ gaïÈě, która rozdziela siÚ, dajÈc poczÈtek dwóm kolejnym gaïÚziom, a nastÚpnie rekurencyjnie wywoïaÊ samÈ siebie, by narysowaÊ te dwie gaïÚzie wraz z kolejnymi, jeszcze mniejszymi gaïÚziami. Teraz, kiedy juĝ wiemy, jak ma dziaïaÊ nasz fraktal, moĝemy go zaimplementowaÊ, korzystajÈc z API elementów canvas. Najprostszym sposobem utworzenia gaïÚzi rozdzielajÈcej siÚ na dwie kolejne jest narysowanie dwóch krzywych kwadratowych, wygiÚtych w przeciwnych kierunkach. GdybyĂmy zastosowali dla kaĝdej iteracji dokïadnie tÚ samÈ procedurÚ, to narysowane drzewo byïoby idealnie symetryczne i maïo interesujÈce. Aby wyglÈdaïo ono bardziej naturalnie, po- ïoĝenie punktów koñcowych poszczególnych gaïÚzi bÚdzie modyfikowane o wartoĂci losowe. Dodatkowe informacje Najciekawszym aspektem tej receptury jest to, ĝe kaĝde narysowane drzewo bÚdzie inne. JeĂli Czytelnik zaimplementuje powyĝszy przykïad i bÚdzie go wielokrotnie wyĂwietlaï w przeglÈdarce, to kaĝde z wygenerowanych drzew bÚdzie unikalne. Moĝna takĝe spróbowaÊ zmodyfikowaÊ algorytm rysujÈcy gaïÚzie, by tworzyÊ róĝne rodzaje drzew albo nawet dorysowywaÊ liĂcie na koñcach najmniejszych gaïÈzek. Doskonaïymi przykïadami fraktali w naturze sÈ muszle, pïatki Ăniegu, pióra, roĂliny, krysztaïy, góry, rzeki i bïyskawice. 35 HTML5 Canvas. Receptury 36 Skorowidz FPS, 124, 161 wyĂwietlanie, 157 Gear, 141 draw(), 141, 145 wïaĂciwoĂci, 144 koïa zÚbate, 140 draw(), 141, 145 start(), 145 oscylacje, 133 arc(), 137 rect(), 134 ruchome wahadïo, 137 ruchomy bÈbelek, 135 stage(), 134 start(), 134, 137, 140 przyspieszenie, 130, 132 stop(), 132 requestAnimationFrame(), 124 ruch czÈsteczki, 149 start(), 152 ruch liniowy, 128 ruchome mikroby, 153 zwiÚkszanie obciÈĝenia, 162 zegar, 145 arc(), 148 fillText(), 148 shadowOffsetX, 148 shadowOffsetY, 148 start(), 148 stroke(), 148 translate(), 148 Animation, 124, 127 animationLoop(), 127, 271 API, 11, 17 copy, 52 destination-atop, 52 destination-in, 52 destination-out, 52 destination-over, 52 lighter, 52 source-atop, 52 source-in, 52 source-out, 52 source-over, 52 xor, 52 arkusze sprite’ów, 232, 233 B BarChart, 210 drawBars(), 212, 215 drawGridlines(), 213 drawXAxis(), 214 drawXLabels(), 212 drawYAxis(), 214 drawYValues(), 212 getLabelAreaHeight(), 211 getLongestValueWidth(), 211 tworzenie, 210 C canvas, 11, 13 API, 11, 17 addColorStop(), 44 arc(), 21, 41 arcTo(), 22 beginPath(), 28, 44 bezierCurveTo(), 25, 122 closePath(), 44 createLinearGradient(), 44, 59 A Actor, 238 attack(), 239 damage(), 242 draw(), 240, 242 fade(), 240 getCenter(), 242 isFacingRight(), 239 jump(), 240 moveLeft(), 240 moveRight(), 239 sterowanie postaciami, 242 stop(), 239 tworzenie, 238 updateSpriteMotion(), 240, 242 242 updateSpriteSeqNum(), 241, zarzÈdzanie sprite’ami, 242 animacja, 124 Animation, 124, 127 animationLoop(), 127 clear(), 126, 128 getCanvas(), 125 getContext(), 125 getFps(), 127 getTime(), 128 getTimeInterval(), 126, 128 requestAnimationFrame(), 127 requestAnimFrame(), 127 setDrawStage(), 126 start(), 126, 128, 130 stop(), 126, 128, 130 tworzenie, 125 Skorowidz canvas API createPattern(), 45 createRadialGradient(), 44 document.getElement ´ById(), 19 draw(), 62 draw3dText(), 31 drawBranches(), 34 drawImage(), 77, 79, 82, 119 drawTriangle(), 44 Events, 165 fill(), 39, 41 fillRect(), 39 fillText(), 31 getContext(), 19 getImageData(), 85, 87 globalAlpha, 50 globalCompositeOperation, 56 isPointInPath(), 171 krzywe Béziera, 25 lineTo(), 19 moveTo(), 19, 44 obraz, 75 operacje zïoĝone, 52 procedury obsïugi zdarzeñ, 165 putImageData(), 89 quadraticCurveTo(), 24 rect(), 39 request.responseText, 98 requestAnimFrame(), 84, 91 restore(), 50, 115 rotate(), 105, 119 save(), 50, 115 scale(), 107, 110, 117 setInterval(), 102 setTransform(), 111 stos stanu kontekstu, 48 stroke(), 20 strokeRect(), 39 strokeText(), 31 style wypeïnieñ, 42 toDataURL(), 94 transform(), 113 translate(), 119 318 WebGL, 268 atrybuty, 14 height, 14 id, 14 width, 14 drawImage(), 313 fillStyle, 314 fillText(), 314 flaga prawidïowego ěródïa, 313 getImageData(), 314 measureText(), 314 SECURITY_ERR, 314 strokeStyle, 314 strokeText(), 314 toDataURL(), 314 kontekst 2d, 14 kontekst 3d, 267 podstawowy szablon, 14 rodzaje kontekstów, 310 udostÚpnianie treĂci zastÚpczej, 309 getContext(), 309 isCanvasSupported(), 310 WebGL, 267 wïasna gra, 229 Actor, 238 aktualizacja danych, 251 aktualizacja poziomu ĝycia bohatera, 245 arkusz sprite’ów bohatera, 233 arkusz sprite’ów przeciwników, 233 Controller, 246 HealthBar, 245 implementowanie silnika gry, 246 Level, 243 mapa obszarów, 236 Model, 251 najwaĝniejsze cechy, 230 obrazy poziomów, 234 obsïuga bohatera, 238 stany gry, 251, 260, 262 sterowanie postaciami, 242 tworzenie dokumentu HTML, 265 bezpieczeñstwo danych, 313 Controller, 246, 307 uruchamianie, 265 View, 260 wyĂwietlanie poziomu, 243 zarzÈdzanie przebiegiem, 251 addKeyboardListeners(), 248, 251 handleKeyDown(), 249 handleKeyUp(), 248 initGame(), 248, 250 loadImages(), 248 resetGame(), 250 copy, 52 D destination-atop, 52 destination-in, 52 destination-out, 52 destination-over, 52 E Events, 165 addRegionEventListener(), 169 beginRegion(), 171 clear(), 166 closeRegion(), 172 getCanvas(), 166 getCanvasPos(), 166 getContext(), 166 getMousePos(), 168 getTouchPos(), 168 listen(), 167, 172 procedury obsïugi zdarzeñ, 165 reset(), 166 setDrawStage(), 166, 171 setMousePos(), 168 setTouchPos(), 169 tworzenie, 165 wspóïrzÚdne wskaěnika myszy, 172 getMousePos(), 174 Skorowidz F writeMessage(), 173, 179, 182, 185, 188 font, 30 FPS, 157, 161 wyĂwietlanie, 260 funkcje addPoint(), 197 applyPhysics(), 149, 152 draw3dText(), 31, 32 drawBranches(), 34 drawClub(), 65 drawDiamond(), 66 drawFps(), 158, 161 drawFrame(), 83, 90 drawHeart(), 64 drawImage(), 189 drawImages(), 183, 184, 193 drawLogo(), 120, 122 drawMagnifier(), 195 drawMicrobes, 155 drawMicrobes(), 157, 160 drawPath(), 197 drawSpade(), 63, 81 drawStage(), 282, 285, 288, 293 drawTriangle(), 44 focusImage(), 99 getCanvasImg(), 198 getContextSupport(), 310 getFrame(), 126 getRandomAngle(), 121 getRandomColor(), 153, 158 getRandomSize(), 121 getRandomTheta(), 153, 158 getRandomX(), 120 getRandomY(), 121 imageMagnifier(), 191 initBuffers(), 282, 284, 286, 290 isAnimating(), 126 loadCanvas(), 97 loadImages(), 184 loadTexture(), 294 requestAnimationFrame(), 125 stage(), 126, 130, 135, 138, 140, 146, 148, 152, 156, 157, 161, 166, 171, 175, 179, 183, 188, 194, 200, 283 updateColorSequence(), 198 updateMicrobes(), 153, 157, 158 G Gear, 141, 144 globalAlpha, 48, 50 globalCompositeOperation, 56 Graph, 216 drawEquation(), 219, 220 drawXAxis(), 217 drawYAxis(), 218 parametry, 220 transformContext(), 219 tworzenie, 216 H HealthBar, 245 draw(), 246 setHealth(), 245 HTML5, 11 animacje, 315 canvas, 11, 13 API, 17 efekty przejĂÊ, 315 formaty wideo, 82 fraktale, 33 drawBranches(), 34 konwersja obrazu na skalÚ szaroĂci, 92 kopiowanie fragmentów obrazu, 80 drawImage(), 82 krzywa Béziera, 25 bezierCurveTo(), 25 ïÈczenie, 45 punkt kontekstu, 25 punkt koñcowy, 25 punkty kontrolne, 25 niestandardowe przesuniÚcie, 110 transform(), 111 obracanie obrazu, 118 drawImage(), 119 rotate(), 119 translate(), 119 odwracanie kolorów obrazu, 88 putImageData(), 89 odwracanie kolorów w klipach wideo, 90 getImageData(), 91 requestAnimFrame(), 91 operacje zïoĝone, 51 pïótno, 18 closePath(), 44 createLinearGradient(), 44 createPattern(), 45 createRadialGradient(), 44 fillStyle, 39 fps, 100 globalCompositeOperation, 56 kontekst 2d, 18 lineCap, 20 lineJoin, 28 lineWidth, 19 lustrzane odbicie kontekstu, 109 obrót kontekstu, 105, 118 pochylanie kontekstu, 112 przesuwanie kontekstu, 104 rotate(), 105 scale(), 107, 110 shadowBlur, 33 shadowColor, 33 shadowOffsetX, 33 shadowOffsetY, 33 skalowanie kontekstu, 107 stos stanu, 49 strokeStyle, 19 pobieranie danych obrazu, 86 getImageData(), 87 przeksztaïcanie okrÚgu na owal, 116 scale(), 117 translate(), 117 przeksztaïcenia z wykorzystaniem stosu stanu, 113 restore(), 115 save(), 115 rysowanie krzywej kwadratowej, 23 punkt kontekstu, 24 punkt kontrolny, 24 punkt koñcowy, 24 quadraticCurveTo(), 24 319 Skorowidz HTML5 rysowanie linii, 18 lineCap, 20 lineTo(), 19 lineWidth, 19 moveTo(), 19 stroke(), 20 strokeStyle, 19 rysowanie logo, 120 bezierCurveTo(), 122 drawLogo(), 122 rysowanie ïuku, 21 rysowanie okrÚgu, 40 arc(), 21 arcTo(), 22 arc(), 41 fill(), 41 rysowanie prostokÈta, 38 fill(), 39 fillRect(), 39 rect(), 39 strokeRect(), 39 rysowanie przezroczystego rysowanie symboli kolorów koïa, 47 globalAlpha, 48 rysowanie spirali, 28 lineTo(), 29 stroke(), 29 w talii kart, 63 drawClub(), 65 drawDiamond(), 66 drawHeart(), 64 drawSpade(), 63 rysowanie trójkÈta, 42 beginPath(), 44 closePath(), 44 drawTriangle(), 44 lineTo(), 44 moveTo(), 44 rysowanie trójwymiarowego tekstu, 31 draw3dText(), 32 rysowanie zygzaków, 26 beginPath(), 28 lineJoin, 28 moveTo(), 28 stosowanie wartoĂci losowych, 60 tworzenie dokumentu, 265 320 URL, 93 getDataURL(), 97 konwersja obrazu, 93 loadCanvas(), 98 request.responseText, 98 toDataURL(), 94 wyĂwietlanie, 97 zapisywanie obrazu, 96 wklejanie fragmentów obrazu, 80 drawImage(), 82 wycinanie fragmentu obrazu, 78 drawImage(), 79 wykorzystanie pÚtli, 56 wyostrzanie obrazu, 99 setInterval(), 102 wyĂwietlanie klipów wideo, 83 drawFrame(), 83 drawImage(), 83 requestAnimFrame(), 84 wyĂwietlanie obrazu, 76 wyĂwietlanie tekstu, 30 drawImage(), 77 newImage(), 77 onload, 77 fillStyle, 30 fillText(), 31 font, 30 strokeText(), 31 textAlign, 30 textBaseline, 30 K klasy Actor, 238 Animation, 125, 127 BarChart, 210 Controller, 246, 307 Events, 165 Flower, 62 Gear, 141, 144 Graph, 216 HealthBar, 245 Level, 243 LineChart, 222 Model, 251, 307 PieChart, 204 View, 260, 307 WebGL, 268 kontekst 2d, 14 L Level, 243 draw(), 243 getZoneInfo(), 244 setBoundsData(), 243, 244 lighter, 52 lineCap, 20 LineChart, 222 drawLine(), 224, 227 drawXAxis(), 223 drawYAxis(), 224 getLongestValueWidth(), 223 transformContext(), 225 tworzenie, 222 wïaĂciwoĂci, 227 lineJoin, 28 lineWidth, 19, 39 M mapy obszarów, 234 alternatywy, 237 inBounds, 245 levitating, 245 tworzenie, 236 metody addColorStop(), 44, 47 addKeyboardListeners(), 248, 251 addRegionEventListener(), 169, 184, 187 animationLoop(), 127, 271 arc(), 21, 41, 137, 148, 208 arcTo(), 22 attacheListeners(), 299 attack(), 239 beginPath(), 28, 44 beginRegion(), 169, 171, 175, 179, 184, 187 bezierCurveTo(), 122 clear(), 126, 128, 166, 270 closePath(), 44 closeRegion(), 169, 172, 176, 179 createArrayBuffer(), 277 drawBadGuys(), 261 drawBars(), 212, 215 drawCeiling(), 304 drawCrates(), 305 drawElements(), 279, 288, 289, 293 drawEquation(), 220 drawFloor(), 304 drawFps(), 261 drawGridlines(), 213 drawImage(), 77, 79, 82, 119, 313 drawLegend(), 208 drawLine(), 224, 227 drawPieBorder(), 205, 208 drawScreen(), 262 drawSlices(), 208 drawWalls(), 305 drawXAxis(), 214, 217, 223 drawXLabels(), 212 drawYAxis(), 214, 218, 224 drawYValues(), 212 enableLighting(), 279, 295 fade(), 240 fill(), 39, 41, 47 fillRect(), 39 fillText(), 31, 148, 314 getCanvas(), 166 getCenter(), 242 getCnavasPos(), 166 getContext(), 19, 125, 166, 309 getDataURL(), 97 getFps(), 127, 271 getFragmentShaderGLSL(), 272 getFrame(), 270 createElementArrayBuffer(), getImageData(), 85, 87, 91, 277 createLinearGradient(), 44, 59 createPattern(), 45 createRadialGradient, 46 createRadialGradient(), 44 damage(), 242 document.getElementById(), draw(), 62, 141, 145, 240, 242, 243, 246 drawArrays(), 279, 282, 283, 14, 19 284 314 getLabelAreaHeight(), 211 getLegendWidth(), 205 getLongestValueWidth(), 211, 223 getMousePos(), 168, 174, 298 getTime(), 128, 271 getTimeInterval(), 126, 128, 271 getTotalValue(), 206 getTouchPos(), 168 getVertexShaderGLSL(), 273 getZoneInfo(), 244 handleKeyDown(), 249, 298 handleKeyUp(), 248, 299 handleMouseDown(), 298 handleMuseMove(), 298 identity(), 275, 283 init(), 294 initBadGuys(), 255 initBuffers(), 303 initColorShader(), 276 initCratePosition(), 301 initCubeBuffers(), 301 initFloorBuffers(), 302 initGame(), 248, 250 initHealthBar(), 254 initHero(), 254 initLevel(), 254 initLightingShader(), 277 initNormalShader(), 276 initPositionShader(), 276 initShaders(), 274 initTexture(), 277 initTextureShader(), 276 initWallBuffers(), 303 isAnimating(), 270 isCanvasSupported(), 310 isFacingRight(), 239 isPointInPath(), 171 jump(), 240 lineTo(), 19, 29 listen(), 167, 172 loadImages(), 248 loadTextures(), 297 measureText(), 314 moveBadGuys(), 256, 260 moveLeft(), 240 Skorowidz moveRight(), 239 moveTo(), 19, 28, 44 nearby(), 259 perspective(), 275, 283 pushColorBuffer(), 278 pushIndexBuffer(), 278 pushNormalBuffer(), 278 pushPositionBuffer(), 278, 283 pushTextureBuffer(), 278 putImageData(), 89 rect(), 39, 134 removeDefeatedBadGuys(), 252 requestAnimationFrame(), 124, 127, 269 requestAnimFrame(), 84, 91, 127, 269 reset(), 166 resetGame(), 250 restore(), 50, 115, 272 rotate(), 105, 119, 276, 285 save(), 50, 115, 272 scale(), 107, 110, 117 setAmbientLighting(), 279, 295 295 setBoundsData(), 243, 244 setDirectionalLighting(), 280, setDrawStage(), 126, 166, 171, 270 setHealth(), 245 setInterval(), 102 setMatrixUniforms(), 279 setMousePos(), 168 setShaderProgram(), 275, 295 setStage(), 294 setTouchPos(), 169 setTransform(), 111 stage(), 134, 262, 306 start(), 126, 128, 130, 134, 137, 140, 145, 148, 152, 285 startAnimation(), 270 stop(), 126, 128, 130, 132, 239 stopAnimation(), 271 stroke(), 20, 27, 29, 148 strokeRect(), 39 strokeText(), 31, 314 toDataURL(), 94, 201, 314 321 metody lustrzane odbicie kontekstu drawLogo(), 122 skalowanie kontekstu pïótna, 107 przeksztaïcanie okrÚgu technika przeciÈgnij i upuĂÊ, na owal, 116 scale(), 107 188 mousedown, 190 mouseout, 190 mouseover, 190 mouseup, 190 URL, 93 getDataURL(), 97 konwersja, 93 loadCanvas(), 98 request.responseText, 98 toDataURL(), 94 wyĂwietlanie, 97 zapisywanie, 96 wklejanie fragmentu, 80 drawImage(), 82 wyostrzanie, 99 setInterval(), 102 wyĂwietlanie, 76 drawImage(), 77 new Image(), 77 onload, 77 obrazy poziomów, 234 alternatywy, 237 ukïad mozaiki, 238 wczytywanie z opóěnieniem, 237 tworzenie, 234 wyĂwietlanie, 243 onload, 77 P PieChart, 204 drawLegend(), 207, 208 drawPieBorder(), 205, 208 drawSlices(), 206, 208 getLegendWidth(), 205 getTotalValue(), 206 tworzenie, 204 procedury obsïugi zdarzeñ, 165 dotyk, 178 beginRegion(), 179 Skorowidz transform(), 111, 113 transformContext(), 219, 225 translate(), 117, 119, 148, 276 updateActor(), 258 updateActorVY(), 258 updateActorX(), 259 updateActorY(), 258 updateBadGuys(), 252 updateCameraPos(), 303 updateHeroCanvasPos(), 257 updateLevel(), 257 updateSpriteMotion(), 240, 242 updateSpriteSeqNum(), 241, 242 updateStage(), 253 writeMessage(), 175 Model, 251, 307 initBadGuys(), 255 initHealthBar(), 254 initHero(), 254 initLevel(), 254 moveBadGuys(), 256, 260 nearby(), 259 removeDefeatedBadGuys(), 252 updateActor(), 258 updateActorVY(), 258 updateActorX(), 259 updateActorY(), 258 updateBadGuys(), 252 updateHeroCanvasPos(), 257 updateLevel(), 257 updateStage(), 253 zadania, 260 mousedown, 176, 187, 190, 199, 201 mousemove, 176, 187 mouseout, 176, 187, 190 mouseover, 176, 187, 190 mouseup, 176, 187, 190, 200, 201 O obraz, 75 animacja, 124 konwersja na skalÚ szaroĂci, 92 kopiowanie fragmentu, 80 drawImage(), 82 322 pïótna, 109 scale(), 110 niestandardowe przesuniÚcie, 110 transform(), 111 obracanie, 118 drawImage(), 119 rotate(), 119 translate(), 119 obrót kontekstu pïótna, 105 rotate(), 105 odwracanie kolorów, 88 putImageData(), 89 pobieranie danych, 86 getImageData(), 87 pochylanie kontekstu pïótna, 112 transform(), 113 powiÚkszanie fragmentu, 190, 195 procedury obsïugi zdarzeñ, 181 beginRegion(), 184 mousedown, 199, 201 mouseup, 200, 201 prosta aplikacja graficzna, 196 isMouseDown, 198 mousedown, 199, 201 mouseup, 200, 201 podstawowe cechy, 201 przeksztaïcanie okrÚgu na owal, 116 scale(), 117 translate(), 117 przeksztaïcenia z wykorzystaniem stosu stanu, 113 restore(), 115 save(), 115 przesuwanie kontekstu pïótna, 104 przycinanie, 77 drawImage(), 79 RGB, 85 konwersja na skalÚ szaroĂci, 93 rysowanie logo, 120 bezierCurveTo(), 122 Skorowidz closeRegion(), 179 touchend, 180, 181 touchmove, 179 touchstart, 180 isPointInPath(), 171 mousedown, 176, 187, 190, 199, 201 mousemove, 174, 176, 187 mouseout, 174, 176, 187, 190 mouseover, 176, 187, 190 mouseup, 176, 187, 190, 200, 201 mysz, 174 beginRegion(), 175 closeRegion(), 176 mousedown, 176 mousemove, 176 mouseout, 176 mouseover, 176 mouseup, 176 writeMessage(), 175 obraz, 181 184 addRegionEventListener(), beginRegion(), 184 powiÚkszanie fragmentu grafiki, 190, 195 technika przeciÈgnij i upuĂÊ, 185, 188 addRegionEventListener(), 187 beginRegion(), 187 fazy, 187 mousedown, 187, 190 mousemove, 187 mouseout, 187, 190 mouseover, 187, 190 mouseup, 187, 190 touchend, 180, 181 touchmove, 179 touchstart, 180, 181 R receptury animacja koïa zÚbate, 140 zegar, 145 klipy wideo odwracanie kolorów, 89 wyĂwietlanie, 82 kontekst pïótna obrót, 105 przesuwanie, 104 pochylanie, 112 skalowanie, 107 niestandardowe przesuniÚcie, 110 obraz konwersja kolorów rysunku na skalÚ szaroĂci, 91 kopiowanie fragmentów, 80 obracanie, 118 odwracanie kolorów, 87 pobieranie danych, 84 powiÚkszanie fragmentu, 190 przycinanie, 77 wyostrzanie obrazka o powiÚkszonych pikselach, 99 wklejanie fragmentów, 80 operacje zïoĝone, 51 procedury obsïugi zdarzeñ doïÈczanie do obrazków, 181 dotyku, 178 myszy, 174 przeciÈgnij i upuĂÊ ksztaït, 185 obrazek, 188 przeksztaïcenia okrÈg na owal, 116 rysunek na postaÊ danych wykorzystanie stosu stanu, URL, 93 113 ruchome wahadïo, 137 rysowanie chmurka, 45 koïo zÚbate, 56 krzywa Béziera, 25 krzywa kwadratowa, 23 linia, 18 ïÈka kwiatów, 59 ïuk, 21 nawiedzone drzewo, 33 odrzutowiec, 67 okrÈg, 40 proste logo, 119 prostokÈt, 38 przezroczyste ksztaïty, 47 spirala, 28 trójkÈt, 281 trójwymiarowy tekst z cieniem, 31 zygzak, 26 style wypeïnienia, 42 symulacja fizyki czÈstek, 149 tekstury i oĂwietlenie, 290 tworzenie aplikacja graficzna, 196 funkcja rysujÈca niestandardowe ksztaïty, 62 mikroskopijne ĝyjÈtka, 153 obracajÈcy siÚ szeĂcian, tworzenie klasy 286 odbicie lustrzane, 109 oscylacje, 133 przyspieszenie, 130 ruch liniowy, 128 trójwymiarowy Ăwiat, 296 wïasne ksztaïty, 42 Actor, 238 Animation, 124 Controller, 246 Events, 164 HealthBar, 245 Level, 243 Model, 251 upraszczajÈca korzystanie z API WebGL, 268 View, 260 tworzenie wykresu koïowy, 204 liniowy, 221 sïupkowy, 209 wizualizacja równañ, 216 wyĂwietlanie klipów wideo, 82 obrazu, 76 tekstu, 30 wspóïrzÚdne myszy, 172 rect(), 39, 134 323 konwersja na skalÚ szaroĂci, 93 spirala, 28 Skorowidz removeDefeatedBadGuys(), 252 request.responseText, 98 requestAnimationFrame(), 125, 127, 269 requestAnimFrame(), 84, 91, 127, 269 reset(), 166 resetGame(), 250 restore(), 50, 115, 272 RGB, 85 rotate(), 105, 119, 276, 285 rysowanie, 17 chmurka, 45 addColorStop(), 47 createRadialGradient, 46 fill(), 47 drzewo, 33 drawBranches(), 34 koïo zÚbate, 56 createLinearGradient(), 59 krzywa Béziera, 25 bezierCurveTo(), 25 ïÈczenie, 45 punkt kontekstu, 25 punkt koñcowy, 25 punkty kontrolne, 25 krzywa kwadratowa, 23 punkt kontekstu, 24 punkt kontrolny, 24 punkt koñcowy, 24 quadraticCurveTo(), 24 kwiaty, 60 draw(), 62 linia, 18 lineCap, 20 lineTo(), 19 lineWidth, 19 moveTo(), 19 stroke(), 20 strokeStyle, 19 logo, 120 bezierCurveTo(), 122 drawLogo(), 122 ïuk, 21 arc(), 21 arcTo(), 22 odrzutowiec, 68 324 okrÈg, 40 arc(), 41 fill(), 41 prostokÈt, 38 fill(), 39 fillRect(), 39 rect(), 39 strokeRect(), 39 przezroczyste koïo, 47 globalAlpha, 48 lineTo(), 29 stroke(), 29 style wypeïnieñ, 42 gradienty koïowe, 44 gradienty liniowe, 44 kolory gradientu, 44 wzorce, 45 symbole kolorów w talii kart, trójkÈt, 42 63 drawClub(), 65 drawDiamond(), 66 drawHeart(), 64 drawSpade(), 63 beginPath(), 44 closePath(), 44 drawTriangle(), 44 lineTo(), 44 moveTo(), 44 trójwymiarowy tekst, 31 draw3dText(), 32 zygzak, 26 beginPath(), 28 lineJoin, 28 moveTo(), 28 S shadowBlur, 33 shadowColor, 33 shadowOffsetX, 33, 148 shadowOffsetY, 33, 148 source-atop, 52 source-in, 52 source-out, 52 source-over, 52 stos stanu kontekstu, 113 odtwarzanie przeksztaïceñ, 114 restore(), 115 zapisywanie przeksztaïceñ, 114 save(), 115 stos stanu pïótna, 49 dodanie na stos, 49 odczyt wierzchoïka, 49 pobranie ze stosu, 49 przywracanie stanu kontekstu, 50 restore(), 50 struktura danych, 49 zapisanie stanu kontekstu, 50 save(), 50 T tekst, 30 rysowanie trójwymiarowego tekstu, 31 draw3dText(), 32 wyĂwietlanie w elemencie canvas, 30 fillStyle, 30 fillText(), 31 font, 30 strokeText(), 31 textAlign, 30 textBaseline, 30 textAlign, 30 textBaseline, 30 touchend, 180, 181 touchmove, 179, 181 touchstart, 180, 181 V View, 260, 307 drawBadGuys(), 261 drawFps(), 261 drawScreen(), 261, 262 stage(), 262 W WebGL, 267, 268 animationLoop(), 271 clear(), 270 createArrayBuffer(), 277 createElementArrayBuffer(), 277 dodawanie tekstur i oĂwietlenia, 290 bufor normalnych, 295 bufor tekstur, 295 drawElements(), 293 enableLighting(), 295 init(), 294 oĂwietlenie kierunkowe, 295 oĂwietlenie otoczenia, 295 setAmbientLighting(), 295 setDirectionalLighting(), 295 setShaderProgram(), 295 setStage(), 294 drawArrays(), 279 drawElements(), 279 enableLighting(), 279 experimental-webgl, 283 getFps(), 271 getFragmentShaderGLSL(), 272 getFrame(), 270 getTime(), 271 getTimeInterval(), 271 getVertexShaderGLSL(), 273 identity(), 275 initColorShader(), 276 initLightingShader(), 277 initNormalShader(), 276 initPositionShader(), 276 initShaders(), 274 initTexture(), 277 initTextureShader(), 276 isAnimating(), 270 obracanie trójkÈta, 284 drawArrays(), 284 rotate(), 285 start(), 285 okreĂlanie dostÚpnych kontekstów, 310 operacje na macierzach, 280 perspective(), 275 prosty model trójwymiarowy, 286 bufor indeksów, 289 bufor kolorów, 289 bufor poïoĝenia, 289 drawElements(), 288, 289 pushColorBuffer(), 278 pushIndexBuffer(), 278 pushNormalBuffer(), 278 pushPositionBuffer(), 278 pushTextureBuffer(), 278 requestAnimationFrame(), 269 requestAnimFrame(), 269 restore(), 272 rotate(), 276 rysowanie trójkÈta, 281 drawArrays(), 282, 283 identity(), 283 perspective(), 283 pushPositionBuffer(), 283 save(), 272 setAmbientLighting(), 279 setDirectionalLighting(), 280 setDrawStage(), 270 setMatrixUniforms(), 279 setShaderProgram(), 275 shadery, 280 BLUE_COLOR, 283 TEXTURE_ DIRECTIONAL_ LIGHTING, 295 VARYING_COLOR, 288 startAnimation(), 270 stopAnimation(), 271 translate(), 276 trójwymiarowy Ăwiat, 296 attacheListeners(), 299 bufory podïogi, 296 bufory szeĂcianów, 296 bufory Ăcian, 296 Controller, 307 drawCeiling(), 304 drawCrates(), 305 drawFloor(), 304 drawWalls(), 305 getMousePos(), 298 handleKeyDown(), 298 handleKeyUp(), 299 handleMouseDown(), 298 handleMuseMove(), 298 initBuffers(), 303 initCratePosition(), 301 initCubeBuffers(), 301 initFloorBuffers(), 302 Skorowidz wideo, 82 initWallBuffers(), 303 loadTextures(), 297 Model, 307 stage(), 306 tworzenie, 296 updateCameraPos(), 303 View, 307 formaty, 82 H.264, 82 odwracanie kolorów w klipach, 90 getImageData(), 91 requestAnimFrame(), 91 Ogg Theora, 82 WebM, 82 wyĂwietlanie klipów, 83 drawFrame(), 83 drawImage(), 83 requestAnimFrame(), 84 window.onload, 19 wykresy, 203 koïowy, 204 arc(), 208 drawLegend(), 207, 208 drawPieBorder(), 205, 208 drawSlices(), 206, 208 getLegendWidth(), 205 getTotalValue(), 206 PieChart, 204 liniowy, 221 drawLine(), 224, 227 drawXAxis(), 223 drawYAxis(), 224 getLongestValueWidth(), 223 LineChart, 222 transformContext(), 225 sïupkowy, 209 BarChart, 210 drawBars(), 212, 215 drawGridlines(), 213 drawXAxis(), 214 drawXLabels(), 212 drawYAxis(), 214 drawYValues(), 212 getLabelAreaHeight(), 211 325 Skorowidz getLongestValueWidth(), 211 wizualizacja równañ, 216 drawEquation(), 219, 220 drawXAxis(), 217 drawYAxis(), 218 Graph, 216 transformContext(), 219 X xor, 52 326
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5 Canvas. Receptury
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: