A HTML5 Vászon (canvas) Használata - ELTE

Trang chủ » Html5 Canvas Grafika Programozása » A HTML5 Vászon (canvas) Használata - ELTE

Có thể bạn quan tâm

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<!DOCTYPE html> <html lang="hu"> <head> <title>Vászon példa</title> <meta charset="utf-8"> </head> <body> <canvas id="rajzvaszon" width="300" height="200"></canvas> <script> var cnv = document.getElementById('rajzvaszon'); var ctx = cnv.getContext('2d'); rajzvaszon.style.border = "black 1px solid"; ctx.fillStyle = 'lightyellow'; ctx.fillRect(0,0,300,200); ctx.moveTo(0,0); ctx.lineTo(150,100); ctx.lineTo(300,0); ctx.stroke(); </script> </body> </html> 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

Từ khóa » Html5 Canvas Grafika Programozása