Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Beágyazott elemek /A HTML5 vászon (canvas) használata

Beágyazott elemek (II. rész)

A HTML5 vászon (canvas) használata

A <canvas> tag segítségével egy rajzvásznat lehet beilleszteni az oldalba. A rajzvászon tartalma JavaScript segítségével módosítható. Ezáltal dinamikusan jeleníthető meg rajta bármilyen kép, vagy grafika. Sokak véleménye szerint ez az elem veheti át a a jövőben a Flash helyét. Rá lehet másolni akár egy videó aktuális képét, alkalmas webes játékok fejlesztésére, animációk készítésére stb.

Megjegyzés

A Canvas lehetőségeinek kipróbálásához haladó JavaScript-programozásra van szükség. Ebben a tananyagban – terjedelmi okok miatt– nem foglalkozunk a JavaScript-programozással, így most csak néhány egyszerű példán keresztül mutatjuk be a vászon használatát. További példákat és leírást találunk a Canvas - Dive Into HTML5 oldalon.

Egy egyszerű (üres) vászon létrehozása az alábbi módon történik:

Forráskód
<canvas>
</canvas>

Persze ezzel még semmit nem lehet kezdeni. Minden vászonhoz célszerű egy azonosítót rendelni és előre megadni a méretét. Az azonosítóra azért van szükség, mert a vászon tartalmát utólag JavaScript segítségével tudjuk módosítani, és a vászon elérése az azonosító (id) segítségével lehetséges. A vászon szélessége és magassága a width és a height attribútumok segítségével adható meg. Ez alapján egy 300 pixel széles és 200 pixel magas rajzterületet az alábbi kóddal kell létrehozni:

Forráskód
<canvas id="rajzvaszon" width="300" height="200">
</canvas>

Ha a böngésző nem támogatja a canvas taget, akkor a tag tartalma fog megjelenni a képernyőn.

Példa - Boríték rajzolása

Interaktív példa
Magyarázat

A fenti példában létrehoztunk egy <canvas> elemet, amelynek a rajzvaszon nevet adtuk. A getcontext('2d') metódus visszaadta azt az objektumot, amely lehetővé teszi, hogy rajzoljunk a vászonra.

Ezután beállítottuk a vászon szegélyét, kitöltöttük világossárga színnel, majd pedig rajzoltunk rá két szakaszt. Így egy olyan ábrát kaptunk, amely egy borítékot ábrázol.

Természetesen a vászon és a JavaScript arra is jó, hogy interakcióba lépjünk a felhasználóval. Az alábbi kis játékot (Tic-Tac-Toe) Eduardo Abreu publikálta. (forrás: http://www.zeewe.com/blog/html5-canvas-demo-tictactoe/.

Tanulási tipp

További, látványos példákat találhatunk a vászon használatára, a következő webhelyen:

21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts+

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.