HTML5 Canvas. Receptury - Helion

Rozdzia 1. • Wprowadzenie do operacji na ciekach i tekstach
Dodatkowe informacje
Oprócz metody fillText() API elementów canvas udostpnia metod strokeText():
context.strokeText("Witaj, wiecie!", x, y);
Metoda ta nie wywietla samego tekstu, lecz wypenia zajmowany przez niego obszar okrelonym
kolorem. Aby wywietli tekst i jednoczenie wypeni kolorem zajmowany przez niego obszar, naley
wywoa zarówno metod fillText(), jak i strokeText(). Aby tekst mia odpowiedni wielko,
w pierwszej kolejnoci naley wywoa metod fillText(), a dopiero po niej metod strokeText().
Patrz take
„Rysowanie trójwymiarowego tekstu z cieniem”.
„Tworzenie odbicia lustrzanego” w rozdziale 4.
„Rysowanie prostego logo i losowe okrelanie jego pooenia, obrotu oraz skali”
w rozdziale 4.
Rysowanie trójwymiarowego tekstu
z cieniem
Osoby, które uwaaj, e zwyczajne, dwuwymiarowe teksty nie s szczególnie atrakcyjne, zainteresuj
si zapewne rysowaniem tekstów trójwymiarowych. Cho API elementów canvas nie
zapewnia bezporednio moliwoci rysowania takich tekstów, to jednak korzystajc z tego API,
stosunkowo atwo mona samodzielnie utworzy funkcj draw3dText().
Jak to zrobi
Aby narysowa trójwymiarowy tekst, naley wykona nastpujce czynnoci:
1. Zdefiniowa kontekst 2d pótna i okreli styl prezentowanego tekstu:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
31