Ugrás a fő tartalomra

HTML5 canvas és a Rajzolási állapotok

Végül eljött az idő arra, hogy megírjam ezt a bemutató cikket a canvasról és főleg a rajzolási állapotokról. Viszont a cikk olyan lesz, mint a felső oktatás, csupa elmélet semmi gyakorlat. :D
Viszont fogok majd a cikk végén plusz anyagot berakni és egy feladatot.

Canvas létrehozása:

A canvas ugyan úgy viselkedik, mint bármelyik HTML elem ezért 2 fajta módon lehet létrehozni.

1.statikusan: Ilyenkor egyszerűen csak belefűzzük a HTML dokumentumunkba azt ,hogy(body után):

<canvas id="myCanvas" width="300" height="200"></canvas>

Ebben az esetben kapunk egy 300x200-as méretű canvast.

2.dinamikus: Ebben az esetben JS kód segítségével kreálunk egy canvas elemet, amit aztán beszúrunk a HTML dokumentumunkba.

var canvas = document.createElement('canvas');
canvas.id = "myCanvas"; 
canvas.width = 300; 
canvas.height = 200;
document.body.appendChild(canvas);

Először létrehozzuk a canvas elemet, majd beállítjuk az id-jét,  szélességét és magasságát. Ezután pedig hozzá csatoljuk a HTML dokumentumunkhoz.

Ezekből az esetekből is kitűnik  hogy a kezelése ugyan olyan, mint ha bármelyik más HTML elemmel szórakoztunk volna.

Canvas begyütése és a 2D Context:

Ahhoz, hogy a Canvasra rajzolni is tudjunk először meg kell szerezni a canvas elemet majd ettől az elemtől megszerezni annak a 2D contextusát.  Ami így nézz ki:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

De jöhet a kérdés, hogy mi az istenverése az a kontesztus(context)? Kontesztus, ahogy a nevéből egyeseknek kijön a rajzolási környezetet adja meg,(Például, hogy milyen színnel rajzolunk ,ami pedig az aktuális rajzolási állapothoz tartozó változó(strokeStyle)). W3C dokumentáció szerint a kontextus egy verem is egyben, ami rajzolási állapotokat(drawing state) tárol.
Megjegyzés:A verem egy adatszerkezet, ami adatokat egymás tetejére rakja és kivételnél mindig a legfelső adatot veszi le. Bővebben itt.

Kontesztus gyakorlatilag az aktuális rajzolási állapot. Emelet a kontesztus egy veremnyi rajzolási állapot  is tárol, de mi az a rajzolási állapot?

Rajzolási állapot(drawing state):

A rajzolási állapot gyakorlatilag egy tároló,ami a következőket tárolja:
  • aktuális transzformációs mátrix
  • aktuális clipping region(kivágott régió)
  • egy rakat (stílus) változó értékét:  strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin,miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font,textAlign,    textBaseline.
Transzformációs mátrix értelmezésébe nem mennék bele, mert már valamennyire elfelejtettem, hogy pontosan mit jelentenek. De emlékeimből az jön le, hogy ezek segítségével tudtunk  nagyítani, forgatni, mozgatni alakzatokat. Akit érdekel az nézze meg ezt.
A lényege, hogy ha ezzel a transzformációs mátrixszal beszorozzuk egy alakzatot, ami szintén egy mátrix(ebben az esetben a mátrix elemei az alakzat koordinátái lesznek), akkor az előbb felsorolt műveleteket tudjuk elvégezni rajta.  Sőt saját transzformációs mátrixszal általunk kigondolt átalakítást is tudunk végezni.

A kivágott régió pedig a rajzolási területet szűkíti le arra a területre, amit megadunk neki.
Ezért csak azon a régión belül tudunk rajzolni.

Amit felsoroltam változókkal tudjunk befolyásolni a rajzolás stílusát. Például strokeStyle beállítja  hogy milyen színnel húzza ki az alakzatot. pl.: context.strokeStyle="green" zöldre állítjuk az "ecsetünket".

Ezekből látszik, hogy a rajzolási állapot befolyásolja azt, hogy milyen stílusban rajzolunk meg bármit a canvason és ennek a változtatás bonyodalmakhoz vezethet ha nem kezeljük jól a rajzolási állapotokat.
Például elfelejtem, hogy megváltoztattam a rajzolásnak a színét és ezért a többi alakzatot is olyan színnel rajzolom meg.

Rajzolási állapottal való munka:

Tehát nagyon fontos az, hogy jól kezeljük ezeket az állapotokat, mivel több is lehet. A kontextusnál írtam, hogy az egy verem és mint minden egyes veremnek ennek is kell, hogy legyen két művelete.

context.save();   lementi az adott rajzolási állapotot a context verembe

context.restore();  context verem tetejéről leszedi a legutoljára elmentett rajzolási állapotot

Ezzel a két egyszerű művelettel tudunk sokkal biztonságosan rajzolni. Azért is írom ide a cikk elején, mert nagyon fontosnak tartom, hogy minden nagyobb rajzolás előtt mentsük le az alapértelmezett rajzolási állapotot és rajzolás után pedig hozzuk ezt az alap állapotot vissza.
Ez azért jó, mert minden rajzolást az alap állapotból tudunk megkezdeni és nem fogja meglepetés érni az embert. Így érdemes használni:

context.save();
//ITT rajzolgatok
context.restore();

Persze lehet őket bátran máshogy is használni, ha az ember megértette a működésüket.
Ahogy nézzem a dokumentációt, amit lent linkeltem be. Stílusok elkülönítését DrawingStyle objektummal is meg lehet oldani, viszont sokkal kevesebb stílus változóra van hatással.
Ezért ha biztos akarsz lenni, akkor használj rajzolási állapotot.

Néhány plusz anyag canvas tanuláshoz:

Ezt a három tutorialt tartom az egyik legjobbaknak a témában:
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
http://diveintohtml5.info/canvas.html
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

Dokumentáció, amiben minden benne van:
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/Overview.html

Könyv, amit tudok a témában ajánlani az a HTML5 Canvas-nak a második kiadása, ami ebben az évben jelent meg és O'Reilly adta ki. Ebben a könyveben minden benne van, ami csak kapcsolódhat a canvashoz és a HTML5 játék készítéshez.
Sajnos még csak az elejébe volt időm beleolvasni, de nem csalódtam benne. Amazon link

Ha a tutorialokkal megvagyunk , akkor jöhet egy kis feladat:
Feladat:
Aki esetleg még mindig gondolkozik egy táblás játék elkészítésén, annak érdemes a tábla rajzolásának a megvalósításán gondolkoznia. Először ajánlom, hogy statikusan vagyis előremegadott méretű tábla megrajzolásával foglalkozunk és ha ezzel meg vagyunk lehet a tábla egyre dinamikusabb vagyis a tábla mérete egy változótól függ. Majd a tábla nagysága függjön tényleges  a képernyő méretétől, hogy mind kis és nagy képernyőn jól jelenjen meg.

Kirajzolás kigondolásához érdemes előbb papíron megrajzolni, hogy miből is áll egy tábla és ez alapján el is lehet indulni.
Ezért is jók a táblás játékok, mert könnyebb őket megrajzolni, mint más játékokat.
Kezdésnek tökéletesek.

Összességében nem tudtam vagy csak nem volt kedvem összehozni azt a fajta összefoglaló tutorialt, amit akartam ezért valószínűleg ennek a cikknek még lesznek folytatásai, ha lesz rá időm.
Na meg már annyi anyag van fent az interneten, hogy nem is tartom fontosnak, hogy csináljak egy sajátot. Viszont a rajzolási állapotok tisztázása szerintem nagyon fontos, ahhoz hogy az ember összetett rajzokat tudjon készíteni.

Megjegyzések

Népszerű bejegyzések ezen a blogon

Python kezdőknek

Itt a nyár és mivel lehetne ezt a legjobban megünnepelni, mint egy kígyóról elnevezett programozási nyelv bemutatásával. Következőkben tehát a Python programozási nyelvről lesz szó és annak lehetséges alkalmazásairól.

Miért tartsunk otthon Python-t? Python pályafutása 1991-ben kezdődött el egy Guido van Rossum nevű fejlesztőnek hála, aki egy olyan általános programozási nyelvet akart készíteni, amit nagyon könnyen el lehet sajátítani és használni. Az elmúlt év tizedek alatt a Python nyelv az egyik legjobb és legnépszerűbb általános programozási nyelvé nőtte ki magát, amit bizonyít, hogy számos operációs rendszeren(linux, mac os) alapból megtalálható a nyelv. De nézzük meg, hogy mitől ilyen népszerű: Egyszerűség: A nyelvnek az egyik legnagyobb előnye, hogy nagyon egyszerű és ezért például nagyon sok egyetemen a kezdő programozó legényeket Python segítségével vezetik be a programozás világába.Dinamikus: Mint minden dinamikus nyelvnek úgy Python-nak is van egy beépített REPL-je, ami nagyo…

Javascript kezdő lépések

Ma kis bejegyzésem arról fog szólni ,hogy mit érdemes kezdő lépésenként megtanulni ,illetve ,hogyan érdemes haladni Javascripttel és néhány érdekesség is lesz node.js-sel kapcsolatban.

Tanulás
   Szerencsére olyan világba élünk már ,ahol a web és webes technológiák nagyon gyorsan fejlődnek és ezért ezeknek a tanulása is egy fajta fejlődésen ment keresztül. Már nem könyvből kell tanulni ,hanem vannak olyan oldalak ahol interaktív módon lehet egy nyelvet megtanulni ,ami tökéletes a tanulás szempontjából. Előző cikkemben raktam be anyagokat ahhoz ,hogy mit érdemes elolvasni ,ha a tanuló inkább olvasós fajta és volt bent 2 interaktív.  Én például codecademy segítségével tanultam meg Jquery-t használni. Javascripthez Eloquent és codeacademy-t használtam.

   Mivel a Javascript elég megengedő ezért nagyon sok fajta stílusban kódolnak hozzá és ezek a stílusok  néha teljesen eltérőék. Szóval aki tanult már Java ,c vagy c++-t annak is lehet újdonság ,mivel ezeknél a nyelveknél nagyon szépen megv…

HTML5 játék fejlesztés alapjai

Ahogy a cím is sugallja a HTML5 játék fejlesztés alapjairól lesz szó ,hogy mi is kell hozzá.
Az én tudásom ebben a témában még elég kicsi ,de egyre növekszik ,talán egyszer majd én is össze fogok szedni annyi tapasztalatot a témából ,hogy akár még könyvet is írhatnék róla. Na persze egy izgalmas könyvet. :D

Na akkor vágjunk is bele!
    Első kérdés ,hogy mi a legalapvetőbb dolog ,amit ehhez meg kell tanulni? Persze sokan mondhatják ,hogy html , javascript ,css ismerete ,ebben igazat is adnék ,de nekünk még van ennél sokkal alapibb tudás ,ami a magyar programozókra főként igaz ez pedig az angol tudás.
Ezt nagyon sokszor tapasztalja az ember ,hogyha nem elég jó az angolja ,akkor egyetlen mondat is megtudja akasztani ,ahol az író nagyon szakmai akart lenni.
Főleg emiatt szeretem azokat az írókat ,akik semmi köntörfalazás nélkül belevágnak a lecsóban és simán és egyszerűen elmagyarázzák a dolgokat.

   Ha az első szint megvan akkor jöhet a HTML tanulása ,ami elég gyorsan letudható ,hiszen c…