HTML5 Canvas. Receptury - Helion

More documents

Recommendations

Info

$C:\Andrzej\PDF\Hakerzy. TechnoanarchiÅci ... - Czytelnia - Helion$

HTML5 Canvas. Receptury var context = canvas.getContext("2d"); context.font = "40pt Calibri"; context.fillStyle = "black"; 2. Okreli wyrównanie i wywietli trójwymiarowy tekst: // wyrodkowanie tekstu w poziomie context.textAlign = "center"; // wyrodkowanie tekstu w pionie context.textBaseline = "middle"; draw3dText(context, "Witaj, wiecie 3D!", canvas.width / 2, 120, 5); }; 3. Zdefiniowa funkcj draw3dText(), która bdzie 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 nisze 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. Umieci element canvas w treci dokumentu HTML: Jak to dziaa Aby narysowa trójwymiarowy tekst w elemencie canvas, mona wywietli kilka nieznacznie przesunitych wzgldem siebie warstw zawierajcych ten sam tekst, tworzc w ten sposób imitacj gbi. W tej recepturze gboko tekstu wynosi 5, co oznacza, e nasza funkcja draw3dText() pi razy wywietli tekst Witaj, wiecie 3D!, za kadym razem nieznacznie go przesuwajc. Te dodatkowe warstwy tekstu zostan wywietlone na czarno, by zapewni imitacj gbi. 32
Rozdzia 1. • Wprowadzenie do operacji na ciekach i tekstach Nastpnie dodamy kolorow, wierzchni warstw. Ostatni operacj jest dodanie rozmytego cienia poniej tekstu, co mona zrobi poprzez przypisanie odpowiednich wartoci waciwociom shadowColor, shadowBlur, shadowOffsetX i shadowOffsetY kontekstu pótna. Waciwoci te mona stosowa nie tylko przy wywietlaniu tekstów, lecz take podcieek, cieek i ksztatów, o czym bdzie jeszcze mowa w dalszej czci ksiki. Wyzwalanie potgi fraktali — rysowanie nawiedzonego drzewa Czym s fraktale? Mona powiedzie, e s one poczeniem matematyki ze sztuk. Znajdziemy je we wszelkiego rodzaju wzorcach wystpujcych w naturze. Pod wzgldem algorytmicznym fraktale s równaniami wykorzystujcymi rekurencj. W tej recepturze narysujemy naturalnie wygldajce drzewo, zaczynajce si od pnia rozdzielajcego si na dwa konary, z których kady nastpnie rozdziela si na dwie gazie. Po dwunastu takich powtórzeniach uzyskamy rozoyste, pozornie chaotyczne drzewo z mas konarów i gazek. Jak to zrobi Oto czynnoci, jakie naley wykona, aby narysowa drzewo, korzystajc z fraktali: 1. Utworzy rekurencyjn funkcj, która bdzie rysowa jedn ga, rozdzielajc si na dwie mniejsze gazie; nastpnie funkcja bdzie wywoywa rekurencyjnie sam siebie, by narysowa te dwie gazie, zaczynajc od ich punktów kocowych: 33
Page 2 and 3: Tytuł oryginału: HTML5 Canvas Coo
Page 4 and 5: Spis treci Rysowanie przezroczystyc
Page 6 and 7: Spis treci Dodatek A. Wykrywanie ob
Page 8 and 9: HTML5 Canvas. Receptury wygldu (sty
Page 10 and 11: HTML5 Canvas. Receptury I w kocu, a
Page 12 and 13: HTML5 Canvas. Receptury Umowny okrg
Page 14 and 15: HTML5 Canvas. Receptury - 100, canv
Page 16 and 17: HTML5 Canvas. Receptury Przeanalizu
Page 18 and 19: HTML5 Canvas. Receptury Najwaniejsz
Page 20 and 21: HTML5 Canvas. Receptury Praca z tek
Page 24 and 25: HTML5 Canvas. Receptury function dr
Page 26 and 27: HTML5 Canvas. Receptury 36
Page 28 and 29: Skorowidz canvas API createPattern(
Page 30 and 31: Skorowidz HTML5 rysowanie linii, 18
Page 32 and 33: Skorowidz metody transform(), 111,
Page 34 and 35: Skorowidz removeDefeatedBadGuys(),
Page 36: Skorowidz getLongestValueWidth(), 2

HTML5 Canvas. Receptury - Helion

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?