‘canvas példa’ címkét tartalmazó cikkek
Ebben a részben a képek manipulálására, megjelenítésére fogjuk használni a HTML5 canvas újításait.
Mielőtt belevágnánk, nézzük meg, hogy milyen módszereket választhatunk egy kép kirajzolására. Igazából a drawImage(img, x,y) paraméterezésének különböző módozatai miatt van lehetőség más és más kirajzolási módokat választanunk.
Az első esetben egyszerű dolgunk van, fogjuk a drawImage(img,x,y) megfelelő paraméterezését – ahol x,y a kép bal felső sarkának koordinátái.
Lássuk, hogy inicializálunk és töltünk egy képet ebben az esetben a rajzvászonra. Ez némi plusz magyarázatra szorul. Először is, létre kell hoznunk egy img – kép element-et (var img=new Image();). Majd az img.onload =function(){ ide jön a végrehajtás rész, esetünkben a drawImage(img,x,y)} inicializáljuk. Lássuk egy egyszerű példán, hogy ez hogyan is néz ki.
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.