‘canvas demo’ címkét tartalmazó cikkek
Ebben a cikkben megnézzük, hogy hogyan lehet szöveget varázsolni a rajzvászonra. Talán egyszerűbb dolgunk lesz, mint a különböző alakzatokkal. Sajnos egyelőre a formázásoknak csak egy viszonylag szűk köre áll rendelkezésünkre és sajnos a CSS3 eljárások, trükkök egyike sem használható. Emiatt személy szerint úgy érzem, hogy egy kicsit elhanyagolt területe a HTML5 újdonságainak. Pedig véleményem szerint szép lehetőségeket jelentene, ha pár CSS3 eljárást használva megformázhatnánk a megjelenő szövegeinket.
Nézzük, milyen eszközeink vannak a szöveg formázására, kiiratására:
- Font (Értékei: betűcsalád, betűstílus, betűváltozat, betűméret és vastagság.)
- TextAlign (ahogy a neve is mutatja a szöveg igazítását szabályozza, értékei rendre a következők lehetnek: start, end, right, left, center)
- TextBaseline (a szöveg kezdőponthoz viszonyított abszolút helyzetét adja meg, értékei: top, hanging, middle, bottom, alphabetic, ideographic)
A következő ábra a WHATWG által demonstrált textBaseline tulajdonságot hivatott magyarázni. Nem gondolom hogy különösebb hozzáfűznivalót igényel, de annyi biztos, hogy egy kicsit túlzásba vitték a fiúk a Szilícium völgyben. :- )
textBaseline
Ebben a cikkben a <Canvas> elemről szeretnék pár érdekességet megosztani. A következőkben pedig, elmélyülünk, a használatában.
A HTML5-ben bevezetésre került <canvas> (rajzvászon) elem, figyelemreméltó lehetőségeket biztosít a webdesignerek és a játék fejlesztők számára egyaránt, hiszen
a <canvas> egy felbontástól független bitképes rajzvászon, grafikonok, játékgrafikák megjelenítésére használhatjuk.
Alapban ez egy üres téglalap alakú terület, (ha nem definiáljuk külön, akkor 300×150 pixeles) amelyre JavaScript-kódokkal tudunk rajzolni.
A Canvas jelenleg egy viszonylag jól kidolgozott 2D API-val rendelkezik, de véleményem szerint a 3D API végleges megjelenésére sem kell sokat várni, hiszen
akkora potenciál van benne, hogy vétek lenne nem kiaknázni.