Ismerkedés a HTML5 Canvas -al
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.
No de vágjunk is bele, lássuk, hogy definiáljuk:
<canvas id="rajzvaszon" width="300" height="300"> </canvas>
Mint látható ID-t adhatunk neki, valamint beállíthatjuk a méreteit. Az ID azért lényeges mert utána DOM-ban tudunk rá hivatkozni. Pl.:
var a_canvas=document.getElementById("rajzvaszon");
Természetesen lehetőségünk van a CSS használatára is. Hiszen a rajzvászon egy HTML elem.
<style type="text/css"> canvas { border: 2px green; } </style> <canvas id=" rajzvaszon " width="300" height="300"> </canvas>
Most nézzünk egy komplett HTML5 példát az elem használatára, készítsetek egy szabványos HTML5 dokumentumot, majd helyezzétek el a body-ban a canvas elemet és javascript segítségével inicializáljuk a 2D környezetet hozzá. Nálam ez valahogy így néz ki:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CANVAS alapok</title> </head> <body> <canvas id="rajzvaszon" width="500" height="500"> </canvas> <script> var canvas = document.getElementById('rajzvaszon'); var ctx = canvas.getContext('2d'); </script> </body> </html>
A koordináta rendszer
A koordináta rendszerünk origója a rajzvászon bal felső sarka, ez a 0, 0 pont. Az X és Y tengelyt a következő ábrán találjátok meg. Értelemszerűen az origótól kiindulva mindkét tengelyen növekednek az értékek.
A téglalap varázslat
Első körben elkészült a rajzvásznunk, megértettük a koordináta rendszerét, most nézzük, hogy hogyan tudunk egy egyszerű objektumot rávarázsolni.
Elsőként egy fekete 200×200 –as négyzettel próbálkozzunk.
Illesszük a következő kódot az előbb elkészített rajzvásznunk script részébe.
ctx.fillRect(50, 50, 200, 200);
A négyszögek esetében társfüggvények nagy csoportja áll rendelkezésünkre, nézzük melyek ezek:
- fillStyle – kitöltési stílus, az elem háttérszíne, Alapértelmezett állapotban fekete, mint ahogy a négyzetünk is.
- fillRect (x, y) – szélesség, magasság alapján négyszöget rajzol
- strokeStyle – keret stílusa, színe
- lineWidth – a keretvastagságot definiálhatjuk vele
- strokeRect (x, y) – négyszöget rajzol az érvényben lévő körvonallal
- clearRect (x, y) – a koordináták alapján a négyszög képpontjait törli
A következő példában a fentieket használva rajzoljunk 4 négyszöget, a kódot kommentekkel láttam el, a jobb megérthetőség miatt.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CANVAS alapok</title> </head> <body> <canvas id="rajzvaszon" width="500" height="500"> </canvas> <script> var canvas = document.getElementById('rajzvaszon'); var ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 150, 150); /*alapértelmezett négyzet*/ ctx.fillStyle = "rgb(0, 160, 230)"; /*kék színű négyzet*/ ctx.fillRect(135, 75, 125, 125); ctx.lineWidth = 4; /*keret vastagság definició*/ ctx.strokeStyle = "rgb(0, 0, 0)"; /*fehér négyzet*/ ctx.strokeRect(50, 350, 150, 150); ctx.fillStyle = "rgba(0, 160, 230, 0.75)"; /*transzparens négyzet*/ ctx.fillRect(150, 400, 125, 125); </script> </body> </html>
Ez eddig egyszerű volt, nézzük mi van ha kicsit bonyolultabb ábrákat szeretnénk készíteni.
BeginPath() – ClosePath() avagy rajzoljunk tollal
Erre van lehetőség, ha megadjuk a toll útvonalát. Ezt a beginPath() metódussal kell kezdenünk és a closePath() metódussal pedig lezárnunk. Amit rajzolunk, azt pedig a két elem közé tesszük listaszerűen, amit a legvégén megjeleníthetünk.
Ha egyenes vonalat akarunk rajzolni, akkor azt a következő módon tehetjük:
- moveTo (x, y) – A ceruzát a megadott kezdőpontba mozgatja
- lineTo (x, y) – A megadott végpontig vonalat húz
- fill() – kitölti a megrajzolt formát
Nézzünk rá egy egyszerű példát. Hozzuk létre a következő ábrát.
<script> var canvas = document.getElementById('rajzvaszon'); var ctx = canvas.getContext('2d'); ctx.lineWidth=5; ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.lineTo(100, 80); ctx.lineTo(100, 20); ctx.closePath(); ctx.fill(); ctx.stroke(); </script>
A következő ötletet egy Samsung digitális ablak reklámfilmben láttam (digitális reluxa…), húzzunk különböző vastagságú vonalakat egymás alá. Hogy ne kelljen 100x ugyanazt a vonalat meghúznunk, tegyük bele az egészet egy for ciklusba. A ciklusunk 30 pixel vastagságtól indul visszafelé és megrajzolja a szükséges vonalainkat. A moveTo azért kapott helyet, mert a beginPath() utasításunk után a ceruza minduntalan visszatér az origóra. Lássuk a ciklusunkat.
for (i = 25; i > 0; i--) { ctx.strokeStyle = "black"; ctx.lineWidth = i; ctx.beginPath(); ctx.moveTo(60, 20 + (25 - i) * 25); ctx.lineTo(335, 20 + (25 - i) * 25); ctx.stroke(); }
Rajzoljunk kört
A kör rajzolásához az 5 paraméteres hírhedt arc(x, y, radius, start, end, anticlockwise) metódusra lesz szükségünk. Paraméterei sorrendben a következők: az x és az y jelenti a kör középpontját, a radius a kör sugarát, a start a kezdő szöget (radiánban), az end az ívet míg anticlockwise a körüljárás irányát jelenti. Nézzünk rá egy egyszerű példát:
<script> var canvas = document.getElementById('rajzvaszon'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(180, 150, 50, 0, Math.PI*2, true); ctx.fill(); </script>
Tegyünk alá egy négyzetet. 🙂
<script> var canvas = document.getElementById('rajzvaszon'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(180, 150, 50, 0, Math.PI*2, true); ctx.fill(); ctx.fillRect(155, 200, 50, 50); </script>
Folytatása következik!
Forrás:
http://www.w3.org/TR/html5/the-canvas-element.html
Ismerkedés a HTML5 Canvas -al a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.