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.
Canvas koordináta rendszer
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.
Példa 1.
<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.
Példa 2.
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. 🙂
Példa 3.
<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.
