tytuł oryginału: html5 canvas cookbook

Tytuł oryginału: HTML5 Canvas CookbookTł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 kompletnei 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 HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: 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/ht5creMoż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ść

http://helion.pl/rt/ht5cre

http://helion.pl/rf/ht5cre

http://helion.pl/ro/ht5cre

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre�ci

Zespó� oryginalnego wydania 7

O autorze 8

O recenzentach 9

Wst�p 11

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

Rozdzia� 1. Wprowadzenie do operacji na �cie�kach i tekstach 17

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

Rozdzia� 2. Rysowanie kszta�tów i elementów z�o�onych 37

Wprowadzenie 37Rysowanie prostok�ta 38Rysowanie okr�gu 40Tworzenie w�asnych kszta�tów i stosowanie stylów wype�nienia 42Zabawa z krzywymi Béziera — rysowanie chmurki 45

Spis tre�ci

4

Rysowanie przezroczystych kszta�tów 47Korzystanie ze stosu stanu kontekstu w celu zapisywania i odtwarzania stylów 48Stosowanie operacji z�o�onych 51Wykorzystanie p�tli do tworzenia wzorców — rysowanie ko�a z�batego 56Stosowanie warto�ci losowych we w�a�ciwo�ciach kszta�tów — rysowanie ��ki kwiatów 59Tworzenie funkcji rysuj�cych niestandardowe kszta�ty — talie kart 62Po��czenie wszystkich wiadomo�ci — rysowanie odrzutowca 67

Rozdzia� 3. Praca z obrazami i klipami wideo 75

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

Rozdzia� 4. Stosowanie przekszta�ce� 103

Wprowadzenie 103Przesuwanie kontekstu p�ótna 104Obrót kontekstu p�ótna 105Skalowanie kontekstu p�ótna 107Tworzenie odbicia lustrzanego 109Tworzenie przekszta�ce� niestandardowych 110Pochylanie kontekstu p�ótna 112Obs�uga wielu przekszta�ce� z wykorzystaniem stosu stanu 113Przekszta�canie okr�gu na owal 116Obracanie obrazka 118Rysowanie 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 124Tworzenie klasy Animation 124Tworzenie ruchu liniowego 128Tworzenie przyspieszenia 130Tworzenie oscylacji 133Oscyluj�cy b�belek 135Ruchome wahad�o 137Animowane ko�a z�bate 140Animowany zegar 145

Spis tre�ci

5

Symulacja fizyki cz�stek 149Tworzenie mikroskopijnych �yj�tek 153Dzia�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 164Tworzenie klasy Events 164Korzystanie ze wspó�rz�dnych myszy w obszarze elementu canvas 172Do��czanie procedur obs�ugi zdarze� myszy do regionów 174Do��czanie procedur obs�ugi zdarze� dotyku do regionów na urz�dzeniach przeno�nych 178Do��czanie procedur obs�ugi zdarze� do obrazków 181Przeci�ganie i upuszczanie kszta�tów 185Przeci�ganie i upuszczanie obrazków 188Tworzenie powi�kszania fragmentu obrazka 190Tworzenie aplikacji graficznej 196

Rozdzia� 7. Tworzenie grafów i wykresów 203

Wprowadzenie 203Tworzenie wykresu ko�owego 204Tworzenie wykresu s�upkowego 209Wizualizacja równa� 216Rysowanie danych punktowych przy u�yciu wykresu liniowego 221

Rozdzia� 8. Ratujemy �wiat, pisz�c now� gr� 229

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

Rozdzia� 9. Wprowadzenie do WebGL 267

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

Spis tre�ci

6

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 315Wydajno�� elementów canvas na urz�dzeniach przeno�nych 316

Skorowidz 317

1

Wprowadzeniedo operacji na �cie�kach

i tekstach

W tym rozdziale zostan� opisane nast�puj�ce zagadnienia:� rysowanie linii,� rysowanie �uków,� rysowanie krzywych kwadratowych,� rysowanie krzywych Béziera,� rysowanie zygzaków,� rysowanie spiral,� praca z tekstem,� rysowanie trójwymiarowych tekstów z cieniem,� wyzwolenie pot�gi fraktali — rysowanie nawiedzonego drzewa.

WprowadzenieCelem 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

18

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 wsparciedla rysowania tekstów, udost�pniaj�c przy tym kilka w�a�ciwo�ci pozwalaj�cych na okre�lanie ichstylu. Zaczynajmy!

Rysowanie liniiPodczas rozpoczynania nauki korzystania z p�ócien HTML5 wi�kszo�� osób jest zainteresowanarysowaniem 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();};

Rozdzia� 1. • Wprowadzenie do operacji na �cie�kach i tekstach

19

3. Umie�ci� element canvas w tre�ci dokumentu HTML:

<canvas id="myCanvas" width="600" height="250" style="border:1pxsolid 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�aJak wida� na powy�szym przyk�adzie, zanim b�dzie mo�na odwo�a� si� do elementu canvas napodstawie jego identyfikatora, nale�y poczeka� na wczytanie ca�ej strony. Mo�na to zrobi�, u�ywaj�cinicjalizatora window.onload. Po zakoczeniu 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 metodygetContext() 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 zakoczeniu rysowania — aby styl jednak zosta� uwzgl�dniony, trzeba go za-stosowa� bezpo�rednio po narysowaniu elementu. Grubo�� linii mo�na okre�li� przy u�yciuw�a�ciwo�ci lineWidth, a jej kolor przy zastosowaniu w�a�ciwo�ci strokeStyle. Mo�na uzna�, �ete czynno�ci przypominaj� rysowanie na kartce papieru — zanim zaczniemy rysowa�, wybieramykredk� (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�� elementucanvas.

Po umieszczeniu kursora rysuj�cego w okre�lonym punkcie mo�emy narysowa� lini�, u�ywaj�cmetody lineTo(), w której wywo�aniu przekazywane s� wspó�rz�dne punktu kocowego:

context.lineTo(x,y);


20

I w kocu, 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 liniiprzy 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 informacjeRysowane linie mog� mie� trzy ró�ne rodzaje zakocze: butt (prostok�tne), round (okr�g�e) orazsquare (kwadratowe). Styl zakocze mo�na okre�la� przy u�yciu w�a�ciwo�ci lineCap kontekstup�ótna. Domy�lnie stosowane jest zakoczenie butt. Wszystkie trzy style zakocze zosta�yprzedstawione na poni�szym rysunku. Na samej górze widoczny jest domy�lny styl zakocze— butt; �rodkow� lini� narysowano przy wykorzystaniu stylu zakocze 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�adlini� o d�ugo�ci 200 pikseli i szeroko�ci 10 pikseli i zastosujemy przy tym styl zakocze round, toostateczna d�ugo�� linii wyniesie 210 pikseli, gdy� ka�de z jej zakocze powi�kszy jej d�ugo��o 5 pikseli.

Patrz tak�e� „Rysowanie zygzaków”.� „Po��czenie wszystkich wiadomo�ci — rysowanie odrzutowca” w rozdziale 2.


21

Rysowanie �ukuCzasami 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();};


<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"></canvas>

Jak to dzia�aDo narysowania �uku, zdefiniowanego jako fragment umownego okr�gu, s�u�y metoda arc().Przyjrzyjmy si� nast�puj�cemu diagramowi:


22

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 kocowy— 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�tkocowy 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 kocowy — nieco powy�ej �rodka, z prawej strony okr�gu.

Dodatkowe informacjeWarto�ci k�ta pocz�tkowego i kocowego 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�ci1�. 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�eniuodpowiadaj�cym warto�ci k�towi 1�.

Innym sposobem rysowania �uków w elemencie canvas jest u�ycie metody arcTo(). W tymprzypadku �uk definiowany jest na podstawie punktu kontekstu, punktu kontrolnego orazpromienia.

context.arcTo(punktKontrolnyX1, punktKontrolnyY1, punktKoncowyX, punktKoncowyY,�promien);


23

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�eki kszta�tów.

Patrz tak�e� „Rysowanie okr�gu” w rozdziale 2.� „Animowane ko�a z�bate” w rozdziale 5.� „Animowany zegar” w rozdziale 5.

Rysowanie krzywej kwadratowejW tej recepturze wyja�niono, jak rysowa� krzywe kwadratowe. Krzywe tego typu zapewniaj�znacznie wi�ksz� elastyczno�� i pozwalaj� na rysowanie krzywizn bardziej naturalnych od swychkuzynó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


24

- 100, canvas.height - 50); context.stroke();};



Jak to dzia�aKrzywe kwadratowe rysowane w elemencie canvas s� definiowane przez punkt kontekstu, punktkontrolny oraz punkt kocowy:

context.quadraticCurveTo(kontrolnyX,kontrolnyY,punktKocowyX,punktKoncowyY);

Przeanalizujmy nast�puj�cy diagram:

Krzywizna krzywej tego typu jest styczna do trzech stycznych charakterystycznych. W swojejpierwszej cz��ci krzywa kwadratowa jest styczna do umownej prostej przechodz�cej przez punktkontekstu i punkt kontrolny. W szczytowym miejscu wygi�cia krzywa jest styczna do umownejprostej przechodz�cej przez dwa punkty �rodkowe — punktrodkowy1 oraz punktrodkowy2.W swojej kocowej cz��ci krzywa jest styczna do umownej prostej przechodz�cej przez punktykontrolny i kocowy.

Patrz tak�e� „Po��czenie wszystkich wiadomo�ci — rysowanie odrzutowca” w rozdziale 2.� „Wyzwolenie pot�gi fraktali — rysowanie nawiedzonego drzewa”.


25

Rysowanie krzywej BézieraJe�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:



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();};



Jak to dzia�aKrzywe Béziera rysowane w elementach canvas s� definiowane przez punkt kontekstu, dwa punktykontrolne oraz punkt kocowy. 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);


26

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 jeststyczna do umownej prostej przechodz�cej przez punkt kontekstu i pierwszy punkt kontrolny.Kolejna cz�� krzywej jest styczna do umownej prostej przechodz�cej przez punktrodkowy1oraz punktrodkowy3. Wierzcho�ek krzywizny jest styczny do umownej prostej przechodz�cejprzez punktrodkowy2 i punktrodkowy4. Czwarta cz�� krzywej jest styczna do umownej pro-stej przechodz�cej przez punktrodkowy3 oraz punktrodkowy5. Ostatnia cz�� krzywej jeststyczna do umownej prostej przechodz�cej przez drugi punkt kontrolny i punkt kocowy.

Patrz tak�e� „Stosowanie warto�ci losowych we w�a�ciwo�ciach kszta�tów — rysowanie pola

kwiatów” w rozdziale 2.� „Po��czenie wszystkich wiadomo�ci — rysowanie odrzutowca” w rozdziale 2.

Rysowanie zygzakówTa receptura przedstawia sposób rysowania �cie�ki, która powstanie z po��czenia pod�cie�eki utworzy �aman� — zygzak.


27

Jak to zrobi�Aby narysowa� �aman�, nale�y wykona� nast�puj�ce operacje:



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();}



Jak to dzia�aAby 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 liniauko�na skierowana w dó� i w prawo, a w iteracjach parzystych — linia uko�na skierowana w gór�i w prawo.


28

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�tekkolejnej pod�cie�ki. W razie pomini�cia wywo�ania tej metody trzeba by przy u�yciu metodymoveTo() mozolnie umieszcza� punkt kontekstu p�ótna przed rozpocz�ciem rysowania ka�dejlinii, by zapewni�, �e pocz�tek ka�dej kolejnej rysowanej linii b�dzie si� pokrywa� z kocempoprzedniej. Wywo�anie metody beginPath() jest tak�e konieczne w przypadku tworzeniakszta�tów, o czym mowa w nast�pnym rozdziale.

Style po��cze� liniiWarto 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 HTML5jest miter. Korzystaj�c z w�a�ciwo�ci lineJoin kontekstu p�ótna, mo�na tak�e zmieni� stylpo��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 spiraliUwaga — 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");


29

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ótb�dzie przypada� po 50 segmentów linii). Ka�dy segment b�dzie rysowany przyu�yciu metody lineTo(), od koca poprzedniego segmentu do aktualnie wyznaczonegopunktu, przy czym za ka�dym razem promie b�dzie zwi�kszany o 0.75. Po zakoczeniutrzech pe�nych obrotów spirala zostanie wy�wietlona poprzez wywo�anie metodystroke():

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();};



Jak to dzia�aAby narysowa� w elemencie canvas spiral�, mo�emy umie�ci� kursor w jego �rodku, a nast�pnienarysowa� 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 zakoczenia poprzedniej.Analizuj�c ten algorytm rysowania, mo�na wyobrazi� sobie, �e jeste�my dzieckiem, które stoi nachodniku z kawa�kiem kredy w r�ce. Pochylamy si�, przyk�adamy kred� do chodnika i zaczynamykr�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�.


30

Praca z tekstemNiemal wszystkie aplikacje korzystaj� z wy�wietlania tekstów, by efektywnie przekazywa� infor-macje u�ytkownikom. Ta receptura pokazuje, jak wy�wietli� w elemencie canvas optymistycznepowitanie.

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:


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);};



Jak to dzia�aGdy 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.


31

Dodatkowe informacjeOpró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�lonymkolorem. 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� „Rysowanie trójwymiarowego tekstu z cieniem”.� „Tworzenie odbicia lustrzanego” w rozdziale 4.� „Rysowanie prostego logo i losowe okre�lanie jego po�o�enia, obrotu oraz skali”

w rozdziale 4.

Rysowanie trójwymiarowego tekstuz cieniemOsoby, 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 niezapewnia 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");


32

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);}



Jak to dzia�aAby narysowa� trójwymiarowy tekst w elemencie canvas, mo�na wy�wietli� kilka nieznacznieprzesuni�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.


33

Nast�pnie dodamy kolorow�, wierzchni� warstw�. Ostatni� operacj� jest dodanie rozmytego cieniaponi�ej tekstu, co mo�na zrobi� poprzez przypisanie odpowiednich warto�ci w�a�ciwo�ciomshadowColor, shadowBlur, shadowOffsetX i shadowOffsetY kontekstu p�ótna. W�a�ciwo�ci te mo�nastosowa� nie tylko przy wy�wietlaniu tekstów, lecz tak�e pod�cie�ek, �cie�ek i kszta�tów, o czymb�dzie jeszcze mowa w dalszej cz��ci ksi��ki.

Wyzwalanie pot�gi fraktali— rysowanie nawiedzonego drzewaCzym s� fraktale? Mo�na powiedzie�, �e s� one po��czeniem matematyki ze sztuk�. Znajdziemyje we wszelkiego rodzaju wzorcach wyst�puj�cych w naturze. Pod wzgl�dem algorytmicznymfraktale s� równaniami wykorzystuj�cymi rekurencj�. W tej recepturze narysujemy naturalniewygl�daj�ce drzewo, zaczynaj�ce si� od pnia rozdzielaj�cego si� na dwa konary, z których ka�dynast�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 kocowych:


34

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 poprzezwywo�anie funkcji drawBranches():

window.onload = function(){ canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d");

drawBranches(context, canvas.width / 2, canvas.height, 50, 0);};




35

Jak to dzia�aAby narysowa� drzewo przy u�yciu fraktala, nale�y przygotowa� rekurencyjn� funkcj�, którazdefiniuje 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�pnierekurencyjnie wywo�a� sam� siebie, by narysowa� te dwie ga��zie wraz z kolejnymi, jeszczemniejszymi ga��ziami.

Teraz, kiedy ju� wiemy, jak ma dzia�a� nasz fraktal, mo�emy go zaimplementowa�, korzystaj�cz API elementów canvas. Najprostszym sposobem utworzenia ga��zi rozdzielaj�cej si� na dwiekolejne 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 drzewoby�oby idealnie symetryczne i ma�o interesuj�ce. Aby wygl�da�o ono bardziej naturalnie, po-�o�enie punktów kocowych poszczególnych ga��zi b�dzie modyfikowane o warto�ci losowe.

Dodatkowe informacjeNajciekawszym aspektem tej receptury jest to, �e ka�de narysowane drzewo b�dzie inne. Je�liCzytelnik 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 nakocach 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.


36

Skorowidz

AActor, 238

attack(), 239damage(), 242draw(), 240, 242fade(), 240getCenter(), 242isFacingRight(), 239jump(), 240moveLeft(), 240moveRight(), 239sterowanie postaciami, 242stop(), 239tworzenie, 238updateSpriteMotion(), 240,

242updateSpriteSeqNum(), 241,

242zarz�dzanie sprite’ami, 242

animacja, 124Animation, 124, 127

animationLoop(), 127clear(), 126, 128getCanvas(), 125getContext(), 125getFps(), 127getTime(), 128getTimeInterval(), 126, 128requestAnimationFrame(),

127requestAnimFrame(), 127setDrawStage(), 126start(), 126, 128, 130stop(), 126, 128, 130tworzenie, 125

FPS, 124, 161wy�wietlanie, 157

Gear, 141draw(), 141, 145w�a�ciwo�ci, 144

ko�a z�bate, 140draw(), 141, 145start(), 145

oscylacje, 133arc(), 137rect(), 134ruchome wahad�o, 137ruchomy b�belek, 135stage(), 134start(), 134, 137, 140

przyspieszenie, 130, 132stop(), 132

requestAnimationFrame(), 124ruch cz�steczki, 149

start(), 152ruch liniowy, 128ruchome mikroby, 153

zwi�kszanie obci��enia, 162zegar, 145

arc(), 148fillText(), 148shadowOffsetX, 148shadowOffsetY, 148start(), 148stroke(), 148translate(), 148

Animation, 124, 127animationLoop(), 127, 271API, 11, 17

copy, 52destination-atop, 52

destination-in, 52destination-out, 52destination-over, 52lighter, 52source-atop, 52source-in, 52source-out, 52source-over, 52xor, 52

arkusze sprite’ów, 232, 233

BBarChart, 210

drawBars(), 212, 215drawGridlines(), 213drawXAxis(), 214drawXLabels(), 212drawYAxis(), 214drawYValues(), 212getLabelAreaHeight(), 211getLongestValueWidth(), 211tworzenie, 210

Ccanvas, 11, 13

API, 11, 17addColorStop(), 44arc(), 21, 41arcTo(), 22beginPath(), 28, 44bezierCurveTo(), 25, 122closePath(), 44createLinearGradient(),

44, 59

Skorowidz

318

canvasAPI

createPattern(), 45createRadialGradient(), 44document.getElement�ById(), 19

draw(), 62draw3dText(), 31drawBranches(), 34drawImage(), 77, 79, 82,

119drawTriangle(), 44Events, 165fill(), 39, 41fillRect(), 39fillText(), 31getContext(), 19getImageData(), 85, 87globalAlpha, 50globalCompositeOperation,

56isPointInPath(), 171krzywe Béziera, 25lineTo(), 19moveTo(), 19, 44obraz, 75operacje z�o�one, 52procedury obs�ugi

zdarze, 165putImageData(), 89quadraticCurveTo(), 24rect(), 39request.responseText, 98requestAnimFrame(), 84,

91restore(), 50, 115rotate(), 105, 119save(), 50, 115scale(), 107, 110, 117setInterval(), 102setTransform(), 111stos stanu kontekstu, 48stroke(), 20strokeRect(), 39strokeText(), 31style wype�nie, 42toDataURL(), 94transform(), 113translate(), 119

WebGL, 268atrybuty, 14

height, 14id, 14width, 14

bezpieczestwo danych, 313drawImage(), 313fillStyle, 314fillText(), 314flaga prawid�owego �ród�a,

313getImageData(), 314measureText(), 314SECURITY_ERR, 314strokeStyle, 314strokeText(), 314toDataURL(), 314

kontekst 2d, 14kontekst 3d, 267podstawowy szablon, 14rodzaje kontekstów, 310udost�pnianie tre�ci

zast�pczej, 309getContext(), 309isCanvasSupported(), 310

WebGL, 267w�asna gra, 229

Actor, 238aktualizacja danych, 251aktualizacja poziomu �ycia

bohatera, 245arkusz sprite’ów bohatera,

233arkusz sprite’ów

przeciwników, 233Controller, 246HealthBar, 245implementowanie silnika

gry, 246Level, 243mapa obszarów, 236Model, 251najwa�niejsze cechy, 230obrazy poziomów, 234obs�uga bohatera, 238stany gry, 251, 260, 262sterowanie postaciami, 242tworzenie dokumentu

HTML, 265

uruchamianie, 265View, 260wy�wietlanie poziomu, 243zarz�dzanie przebiegiem,

251Controller, 246, 307

addKeyboardListeners(),248, 251

handleKeyDown(), 249handleKeyUp(), 248initGame(), 248, 250loadImages(), 248resetGame(), 250

copy, 52

Ddestination-atop, 52destination-in, 52destination-out, 52destination-over, 52

EEvents, 165

addRegionEventListener(),169

beginRegion(), 171clear(), 166closeRegion(), 172getCanvas(), 166getCanvasPos(), 166getContext(), 166getMousePos(), 168getTouchPos(), 168listen(), 167, 172procedury obs�ugi zdarze, 165reset(), 166setDrawStage(), 166, 171setMousePos(), 168setTouchPos(), 169tworzenie, 165wspó�rz�dne wska�nika

myszy, 172getMousePos(), 174

Skorowidz

319

Ffont, 30FPS, 157, 161

wy�wietlanie, 260funkcje

addPoint(), 197applyPhysics(), 149, 152draw3dText(), 31, 32drawBranches(), 34drawClub(), 65drawDiamond(), 66drawFps(), 158, 161drawFrame(), 83, 90drawHeart(), 64drawImage(), 189drawImages(), 183, 184, 193drawLogo(), 120, 122drawMagnifier(), 195drawMicrobes, 155drawMicrobes(), 157, 160drawPath(), 197drawSpade(), 63, 81drawStage(), 282, 285, 288, 293drawTriangle(), 44focusImage(), 99getCanvasImg(), 198getContextSupport(), 310getFrame(), 126getRandomAngle(), 121getRandomColor(), 153, 158getRandomSize(), 121getRandomTheta(), 153, 158getRandomX(), 120getRandomY(), 121imageMagnifier(), 191initBuffers(), 282, 284, 286,

290isAnimating(), 126loadCanvas(), 97loadImages(), 184loadTexture(), 294requestAnimationFrame(), 125stage(), 126, 130, 135, 138,

140, 146, 148, 152, 156,157, 161, 166, 171, 175,179, 183, 188, 194, 200, 283

updateColorSequence(), 198updateMicrobes(), 153, 157,

158

writeMessage(), 173, 179,182, 185, 188

GGear, 141, 144globalAlpha, 48, 50globalCompositeOperation, 56Graph, 216

drawEquation(), 219, 220drawXAxis(), 217drawYAxis(), 218parametry, 220transformContext(), 219tworzenie, 216

HHealthBar, 245

draw(), 246setHealth(), 245

HTML5, 11animacje, 315canvas, 11, 13

API, 17efekty przej��, 315formaty wideo, 82fraktale, 33

drawBranches(), 34konwersja obrazu na skal�

szaro�ci, 92kopiowanie fragmentów

obrazu, 80drawImage(), 82

krzywa Béziera, 25bezierCurveTo(), 25��czenie, 45punkt kontekstu, 25punkt kocowy, 25punkty kontrolne, 25

niestandardoweprzesuni�cie, 110transform(), 111

obracanie obrazu, 118drawImage(), 119rotate(), 119translate(), 119

odwracanie kolorów obrazu,88putImageData(), 89

odwracanie koloróww klipach wideo, 90getImageData(), 91requestAnimFrame(), 91

operacje z�o�one, 51p�ótno, 18

closePath(), 44createLinearGradient(), 44createPattern(), 45createRadialGradient(), 44fillStyle, 39fps, 100globalCompositeOperation,

56kontekst 2d, 18lineCap, 20lineJoin, 28lineWidth, 19lustrzane odbicie

kontekstu, 109obrót kontekstu, 105, 118pochylanie kontekstu, 112przesuwanie kontekstu, 104rotate(), 105scale(), 107, 110shadowBlur, 33shadowColor, 33shadowOffsetX, 33shadowOffsetY, 33skalowanie kontekstu, 107stos stanu, 49strokeStyle, 19

pobieranie danych obrazu, 86getImageData(), 87

przekszta�canie okr�gu naowal, 116scale(), 117translate(), 117

przekszta�ceniaz wykorzystaniemstosu stanu, 113restore(), 115save(), 115

rysowanie krzywejkwadratowej, 23punkt kontekstu, 24punkt kontrolny, 24punkt kocowy, 24quadraticCurveTo(), 24

Skorowidz

320

HTML5rysowanie linii, 18

lineCap, 20lineTo(), 19lineWidth, 19moveTo(), 19stroke(), 20strokeStyle, 19

rysowanie logo, 120bezierCurveTo(), 122drawLogo(), 122

rysowanie �uku, 21arc(), 21arcTo(), 22

rysowanie okr�gu, 40arc(), 41fill(), 41

rysowanie prostok�ta, 38fill(), 39fillRect(), 39rect(), 39strokeRect(), 39

rysowanie przezroczystegoko�a, 47globalAlpha, 48

rysowanie spirali, 28lineTo(), 29stroke(), 29

rysowanie symboli koloróww talii kart, 63drawClub(), 65drawDiamond(), 66drawHeart(), 64drawSpade(), 63

rysowanie trójk�ta, 42beginPath(), 44closePath(), 44drawTriangle(), 44lineTo(), 44moveTo(), 44

rysowanie trójwymiarowegotekstu, 31draw3dText(), 32

rysowanie zygzaków, 26beginPath(), 28lineJoin, 28moveTo(), 28

stosowanie warto�cilosowych, 60

tworzenie dokumentu, 265

URL, 93getDataURL(), 97konwersja obrazu, 93loadCanvas(), 98request.responseText, 98toDataURL(), 94wy�wietlanie, 97zapisywanie obrazu, 96

wklejanie fragmentówobrazu, 80drawImage(), 82

wycinanie fragmentuobrazu, 78drawImage(), 79

wykorzystanie p�tli, 56wyostrzanie obrazu, 99

setInterval(), 102wy�wietlanie klipów wideo, 83

drawFrame(), 83drawImage(), 83requestAnimFrame(), 84

wy�wietlanie obrazu, 76drawImage(), 77newImage(), 77onload, 77

wy�wietlanie tekstu, 30fillStyle, 30fillText(), 31font, 30strokeText(), 31textAlign, 30textBaseline, 30

Kklasy

Actor, 238Animation, 125, 127BarChart, 210Controller, 246, 307Events, 165Flower, 62Gear, 141, 144Graph, 216HealthBar, 245Level, 243LineChart, 222Model, 251, 307PieChart, 204

View, 260, 307WebGL, 268

kontekst 2d, 14

LLevel, 243

draw(), 243getZoneInfo(), 244setBoundsData(), 243, 244

lighter, 52lineCap, 20LineChart, 222

drawLine(), 224, 227drawXAxis(), 223drawYAxis(), 224getLongestValueWidth(), 223transformContext(), 225tworzenie, 222w�a�ciwo�ci, 227

lineJoin, 28lineWidth, 19, 39

Mmapy obszarów, 234

alternatywy, 237inBounds, 245levitating, 245tworzenie, 236

metodyaddColorStop(), 44, 47addKeyboardListeners(),

248, 251addRegionEventListener(),

169, 184, 187animationLoop(), 127, 271arc(), 21, 41, 137, 148, 208arcTo(), 22attacheListeners(), 299attack(), 239beginPath(), 28, 44beginRegion(), 169, 171, 175,

179, 184, 187bezierCurveTo(), 122clear(), 126, 128, 166, 270closePath(), 44closeRegion(), 169, 172,

176, 179createArrayBuffer(), 277

Skorowidz

321

createElementArrayBuffer(),277

createLinearGradient(), 44, 59createPattern(), 45createRadialGradient, 46createRadialGradient(), 44damage(), 242document.getElementById(),

14, 19draw(), 62, 141, 145, 240,

242, 243, 246drawArrays(), 279, 282, 283,

284drawBadGuys(), 261drawBars(), 212, 215drawCeiling(), 304drawCrates(), 305drawElements(), 279, 288,

289, 293drawEquation(), 220drawFloor(), 304drawFps(), 261drawGridlines(), 213drawImage(), 77, 79, 82,

119, 313drawLegend(), 208drawLine(), 224, 227drawPieBorder(), 205, 208drawScreen(), 262drawSlices(), 208drawWalls(), 305drawXAxis(), 214, 217, 223drawXLabels(), 212drawYAxis(), 214, 218, 224drawYValues(), 212enableLighting(), 279, 295fade(), 240fill(), 39, 41, 47fillRect(), 39fillText(), 31, 148, 314getCanvas(), 166getCenter(), 242getCnavasPos(), 166getContext(), 19, 125, 166, 309getDataURL(), 97getFps(), 127, 271getFragmentShaderGLSL(),

272getFrame(), 270

getImageData(), 85, 87, 91,314

getLabelAreaHeight(), 211getLegendWidth(), 205getLongestValueWidth(),

211, 223getMousePos(), 168, 174, 298getTime(), 128, 271getTimeInterval(), 126, 128,

271getTotalValue(), 206getTouchPos(), 168getVertexShaderGLSL(), 273getZoneInfo(), 244handleKeyDown(), 249, 298handleKeyUp(), 248, 299handleMouseDown(), 298handleMuseMove(), 298identity(), 275, 283init(), 294initBadGuys(), 255initBuffers(), 303initColorShader(), 276initCratePosition(), 301initCubeBuffers(), 301initFloorBuffers(), 302initGame(), 248, 250initHealthBar(), 254initHero(), 254initLevel(), 254initLightingShader(), 277initNormalShader(), 276initPositionShader(), 276initShaders(), 274initTexture(), 277initTextureShader(), 276initWallBuffers(), 303isAnimating(), 270isCanvasSupported(), 310isFacingRight(), 239isPointInPath(), 171jump(), 240lineTo(), 19, 29listen(), 167, 172loadImages(), 248loadTextures(), 297measureText(), 314moveBadGuys(), 256, 260moveLeft(), 240

moveRight(), 239moveTo(), 19, 28, 44nearby(), 259perspective(), 275, 283pushColorBuffer(), 278pushIndexBuffer(), 278pushNormalBuffer(), 278pushPositionBuffer(), 278, 283pushTextureBuffer(), 278putImageData(), 89rect(), 39, 134removeDefeatedBadGuys(),

252requestAnimationFrame(),

124, 127, 269requestAnimFrame(), 84, 91,

127, 269reset(), 166resetGame(), 250restore(), 50, 115, 272rotate(), 105, 119, 276, 285save(), 50, 115, 272scale(), 107, 110, 117setAmbientLighting(), 279,

295setBoundsData(), 243, 244setDirectionalLighting(), 280,

295setDrawStage(), 126, 166,

171, 270setHealth(), 245setInterval(), 102setMatrixUniforms(), 279setMousePos(), 168setShaderProgram(), 275, 295setStage(), 294setTouchPos(), 169setTransform(), 111stage(), 134, 262, 306start(), 126, 128, 130, 134,

137, 140, 145, 148, 152, 285startAnimation(), 270stop(), 126, 128, 130, 132, 239stopAnimation(), 271stroke(), 20, 27, 29, 148strokeRect(), 39strokeText(), 31, 314toDataURL(), 94, 201, 314

Skorowidz

322

metodytransform(), 111, 113transformContext(), 219, 225translate(), 117, 119, 148, 276updateActor(), 258updateActorVY(), 258updateActorX(), 259updateActorY(), 258updateBadGuys(), 252updateCameraPos(), 303updateHeroCanvasPos(), 257updateLevel(), 257updateSpriteMotion(), 240, 242updateSpriteSeqNum(), 241,

242updateStage(), 253writeMessage(), 175

Model, 251, 307initBadGuys(), 255initHealthBar(), 254initHero(), 254initLevel(), 254moveBadGuys(), 256, 260nearby(), 259removeDefeatedBadGuys(),

252updateActor(), 258updateActorVY(), 258updateActorX(), 259updateActorY(), 258updateBadGuys(), 252updateHeroCanvasPos(), 257updateLevel(), 257updateStage(), 253zadania, 260

mousedown, 176, 187, 190, 199,201

mousemove, 176, 187mouseout, 176, 187, 190mouseover, 176, 187, 190mouseup, 176, 187, 190, 200, 201

Oobraz, 75

animacja, 124konwersja na skal� szaro�ci, 92kopiowanie fragmentu, 80

drawImage(), 82

lustrzane odbicie kontekstup�ótna, 109scale(), 110

niestandardoweprzesuni�cie, 110transform(), 111

obracanie, 118drawImage(), 119rotate(), 119translate(), 119

obrót kontekstu p�ótna, 105rotate(), 105

odwracanie kolorów, 88putImageData(), 89

pobieranie danych, 86getImageData(), 87

pochylanie kontekstu p�ótna,112transform(), 113

powi�kszanie fragmentu,190, 195

procedury obs�ugi zdarze,181beginRegion(), 184mousedown, 199, 201mouseup, 200, 201

prosta aplikacja graficzna, 196isMouseDown, 198mousedown, 199, 201mouseup, 200, 201podstawowe cechy, 201

przekszta�canie okr�gu naowal, 116scale(), 117translate(), 117

przekszta�ceniaz wykorzystaniemstosu stanu, 113restore(), 115save(), 115

przesuwanie kontekstup�ótna, 104

przycinanie, 77drawImage(), 79

RGB, 85konwersja na skal�

szaro�ci, 93rysowanie logo, 120

bezierCurveTo(), 122

drawLogo(), 122skalowanie kontekstu p�ótna,

107przekszta�canie okr�gu

na owal, 116scale(), 107

technika przeci�gnij i upu��,188mousedown, 190mouseout, 190mouseover, 190mouseup, 190

URL, 93getDataURL(), 97konwersja, 93loadCanvas(), 98request.responseText, 98toDataURL(), 94wy�wietlanie, 97zapisywanie, 96

wklejanie fragmentu, 80drawImage(), 82

wyostrzanie, 99setInterval(), 102

wy�wietlanie, 76drawImage(), 77new Image(), 77onload, 77

obrazy poziomów, 234alternatywy, 237

uk�ad mozaiki, 238wczytywanie z

opó�nieniem, 237tworzenie, 234wy�wietlanie, 243

onload, 77

PPieChart, 204

drawLegend(), 207, 208drawPieBorder(), 205, 208drawSlices(), 206, 208getLegendWidth(), 205getTotalValue(), 206tworzenie, 204

procedury obs�ugi zdarze, 165dotyk, 178

beginRegion(), 179

Skorowidz

323

closeRegion(), 179touchend, 180, 181touchmove, 179touchstart, 180

isPointInPath(), 171mousedown, 176, 187, 190,

199, 201mousemove, 174, 176, 187mouseout, 174, 176, 187, 190mouseover, 176, 187, 190mouseup, 176, 187, 190,

200, 201mysz, 174

beginRegion(), 175closeRegion(), 176mousedown, 176mousemove, 176mouseout, 176mouseover, 176mouseup, 176writeMessage(), 175

obraz, 181addRegionEventListener(),

184beginRegion(), 184

powi�kszanie fragmentugrafiki, 190, 195

technika przeci�gnij i upu��,185, 188addRegionEventListener(),

187beginRegion(), 187fazy, 187mousedown, 187, 190mousemove, 187mouseout, 187, 190mouseover, 187, 190mouseup, 187, 190

touchend, 180, 181touchmove, 179touchstart, 180, 181

Rreceptury

animacjako�a z�bate, 140zegar, 145

klipy wideoodwracanie kolorów, 89wy�wietlanie, 82

kontekst p�ótnaobrót, 105przesuwanie, 104pochylanie, 112skalowanie, 107

niestandardoweprzesuni�cie, 110

obrazkonwersja kolorów

rysunku na skal�szaro�ci, 91

kopiowanie fragmentów, 80obracanie, 118odwracanie kolorów, 87pobieranie danych, 84powi�kszanie fragmentu,

190przycinanie, 77wyostrzanie obrazka

o powi�kszonychpikselach, 99

wklejanie fragmentów, 80operacje z�o�one, 51procedury obs�ugi zdarze

do��czanie do obrazków, 181dotyku, 178myszy, 174

przeci�gnij i upu��kszta�t, 185obrazek, 188

przekszta�ceniaokr�g na owal, 116rysunek na posta� danych

URL, 93wykorzystanie stosu stanu,

113ruchome wahad�o, 137rysowanie

chmurka, 45ko�o z�bate, 56krzywa Béziera, 25krzywa kwadratowa, 23linia, 18��ka kwiatów, 59�uk, 21nawiedzone drzewo, 33

odrzutowiec, 67okr�g, 40proste logo, 119prostok�t, 38przezroczyste kszta�ty, 47spirala, 28trójk�t, 281trójwymiarowy tekst

z cieniem, 31zygzak, 26

style wype�nienia, 42symulacja fizyki cz�stek, 149tekstury i o�wietlenie, 290tworzenie

aplikacja graficzna, 196funkcja rysuj�ca

niestandardowekszta�ty, 62

mikroskopijne �yj�tka, 153obracaj�cy si� sze�cian,

286odbicie lustrzane, 109oscylacje, 133przyspieszenie, 130ruch liniowy, 128trójwymiarowy �wiat, 296w�asne kszta�ty, 42

tworzenie klasyActor, 238Animation, 124Controller, 246Events, 164HealthBar, 245Level, 243Model, 251upraszczaj�ca korzystanie

z API WebGL, 268View, 260

tworzenie wykresuko�owy, 204liniowy, 221s�upkowy, 209wizualizacja równa, 216

wy�wietlanieklipów wideo, 82obrazu, 76tekstu, 30

wspó�rz�dne myszy, 172rect(), 39, 134

Skorowidz

324

removeDefeatedBadGuys(), 252request.responseText, 98requestAnimationFrame(), 125,

127, 269requestAnimFrame(), 84, 91,

127, 269reset(), 166resetGame(), 250restore(), 50, 115, 272RGB, 85

konwersja na skal� szaro�ci, 93rotate(), 105, 119, 276, 285rysowanie, 17

chmurka, 45addColorStop(), 47createRadialGradient, 46fill(), 47

drzewo, 33drawBranches(), 34

ko�o z�bate, 56createLinearGradient(), 59

krzywa Béziera, 25bezierCurveTo(), 25��czenie, 45punkt kontekstu, 25punkt kocowy, 25punkty kontrolne, 25

krzywa kwadratowa, 23punkt kontekstu, 24punkt kontrolny, 24punkt kocowy, 24quadraticCurveTo(), 24

kwiaty, 60draw(), 62

linia, 18lineCap, 20lineTo(), 19lineWidth, 19moveTo(), 19stroke(), 20strokeStyle, 19

logo, 120bezierCurveTo(), 122drawLogo(), 122

�uk, 21arc(), 21arcTo(), 22

odrzutowiec, 68

okr�g, 40arc(), 41fill(), 41

prostok�t, 38fill(), 39fillRect(), 39rect(), 39strokeRect(), 39

przezroczyste ko�o, 47globalAlpha, 48

spirala, 28lineTo(), 29stroke(), 29

style wype�nie, 42gradienty ko�owe, 44gradienty liniowe, 44kolory gradientu, 44wzorce, 45

symbole kolorów w talii kart,63drawClub(), 65drawDiamond(), 66drawHeart(), 64drawSpade(), 63

trójk�t, 42beginPath(), 44closePath(), 44drawTriangle(), 44lineTo(), 44moveTo(), 44

trójwymiarowy tekst, 31draw3dText(), 32

zygzak, 26beginPath(), 28lineJoin, 28moveTo(), 28

SshadowBlur, 33shadowColor, 33shadowOffsetX, 33, 148shadowOffsetY, 33, 148source-atop, 52source-in, 52source-out, 52source-over, 52stos stanu kontekstu, 113

odtwarzanie przekszta�ce, 114restore(), 115

zapisywanie przekszta�ce, 114save(), 115

stos stanu p�ótna, 49dodanie na stos, 49odczyt wierzcho�ka, 49pobranie ze stosu, 49przywracanie stanu

kontekstu, 50restore(), 50

struktura danych, 49zapisanie stanu kontekstu, 50

save(), 50

Ttekst, 30

rysowanie trójwymiarowegotekstu, 31draw3dText(), 32

wy�wietlanie w elemenciecanvas, 30fillStyle, 30fillText(), 31font, 30strokeText(), 31textAlign, 30textBaseline, 30

textAlign, 30textBaseline, 30touchend, 180, 181touchmove, 179, 181touchstart, 180, 181

VView, 260, 307

drawBadGuys(), 261drawFps(), 261drawScreen(), 261, 262stage(), 262

WWebGL, 267, 268

animationLoop(), 271clear(), 270createArrayBuffer(), 277createElementArrayBuffer(),

277

Skorowidz

325

dodawanie teksturi o�wietlenia, 290bufor normalnych, 295bufor tekstur, 295drawElements(), 293enableLighting(), 295init(), 294o�wietlenie kierunkowe, 295o�wietlenie otoczenia, 295setAmbientLighting(), 295setDirectionalLighting(),

295setShaderProgram(), 295setStage(), 294

drawArrays(), 279drawElements(), 279enableLighting(), 279experimental-webgl, 283getFps(), 271getFragmentShaderGLSL(),

272getFrame(), 270getTime(), 271getTimeInterval(), 271getVertexShaderGLSL(), 273identity(), 275initColorShader(), 276initLightingShader(), 277initNormalShader(), 276initPositionShader(), 276initShaders(), 274initTexture(), 277initTextureShader(), 276isAnimating(), 270obracanie trójk�ta, 284

drawArrays(), 284rotate(), 285start(), 285

okre�lanie dost�pnychkontekstów, 310

operacje na macierzach, 280perspective(), 275prosty model trójwymiarowy,

286bufor indeksów, 289bufor kolorów, 289bufor po�o�enia, 289drawElements(), 288, 289

pushColorBuffer(), 278pushIndexBuffer(), 278pushNormalBuffer(), 278pushPositionBuffer(), 278pushTextureBuffer(), 278requestAnimationFrame(), 269requestAnimFrame(), 269restore(), 272rotate(), 276rysowanie trójk�ta, 281

drawArrays(), 282, 283identity(), 283perspective(), 283pushPositionBuffer(), 283

save(), 272setAmbientLighting(), 279setDirectionalLighting(), 280setDrawStage(), 270setMatrixUniforms(), 279setShaderProgram(), 275shadery, 280

BLUE_COLOR, 283TEXTURE_

DIRECTIONAL_LIGHTING, 295

VARYING_COLOR, 288startAnimation(), 270stopAnimation(), 271translate(), 276trójwymiarowy �wiat, 296

attacheListeners(), 299bufory pod�ogi, 296bufory sze�cianów, 296bufory �cian, 296Controller, 307drawCeiling(), 304drawCrates(), 305drawFloor(), 304drawWalls(), 305getMousePos(), 298handleKeyDown(), 298handleKeyUp(), 299handleMouseDown(), 298handleMuseMove(), 298initBuffers(), 303initCratePosition(), 301initCubeBuffers(), 301initFloorBuffers(), 302

initWallBuffers(), 303loadTextures(), 297Model, 307stage(), 306tworzenie, 296updateCameraPos(), 303View, 307

wideo, 82formaty, 82H.264, 82odwracanie kolorów

w klipach, 90getImageData(), 91requestAnimFrame(), 91

Ogg Theora, 82WebM, 82wy�wietlanie klipów, 83

drawFrame(), 83drawImage(), 83requestAnimFrame(), 84

window.onload, 19wykresy, 203

ko�owy, 204arc(), 208drawLegend(), 207, 208drawPieBorder(), 205, 208drawSlices(), 206, 208getLegendWidth(), 205getTotalValue(), 206PieChart, 204

liniowy, 221drawLine(), 224, 227drawXAxis(), 223drawYAxis(), 224getLongestValueWidth(),

223LineChart, 222transformContext(), 225

s�upkowy, 209BarChart, 210drawBars(), 212, 215drawGridlines(), 213drawXAxis(), 214drawXLabels(), 212drawYAxis(), 214drawYValues(), 212getLabelAreaHeight(), 211

Skorowidz

326

getLongestValueWidth(),211

wizualizacja równa, 216drawEquation(), 219, 220

drawXAxis(), 217drawYAxis(), 218Graph, 216transformContext(), 219

Xxor, 52

http://program-partnerski.helion.pl

tytuł oryginału: html5 canvas cookbook

Documents