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

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);

Itt megtekinthető a demo.

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> 

A példa itt megtekinthető.

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.

Canvas példa 1

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 példa itt elérhető.

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.

Canvas Példa 2

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();
}  

A példa itt megtekinthető.

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>

Itt megtekinthető a példa.

Tegyünk alá egy négyzetet. 🙂

Canvas Példa 3

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>

Itt megtekinthető.

Folytatása következik!

Forrás:
http://www.w3.org/TR/html5/the-canvas-element.html

Creative Commons Licenc
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.

You may also like...