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…

Amikor érdemes játékmotort késziteni

A mondás
A játékkészítő közösségben van egy mondás, hogy "Készíts játékot, ne játékmotort".
Szerintem ez a mondás nagyon is igaz abból a szempontból, hogy ha tényleg játékot akarsz készíteni, akkor válasz egy jól ismert játékmotort és kezd el a fejlesztést, mivel ezek az eszközök azért vannak, hogy megkönnyítésék a játékkészítést  és ugyebár mi értelme van feltalálni a kereket ismét?
Viszont itt is lehet találni kivételeket, amikor igenis el kell gondolkozni egy saját játékmotor fejlesztésén.

Mikor érdemes tehát belefogni?
 Most csak az én esetemet tudom felhozni, ami nem más mint a saját 2D HTML5 játékmotorom, amit DartRocket- nek hívok. Az én esetemben az ok egyszerű volt. Dart nyelven nem volt egy igazi játékmotor sem és én Dart-ban akartam játékokat készíteni.
Itt találtam is egy kiskaput mivel ha nincs játékmotor, akkor csinálni kell egyet. :D


Hogyan kezdődőt el?
Ha időrendben akarok menni, akkor azt kell mondanom, hogy négy időszak volt, ami meghatározó volt.

Phaser: Ebb…

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…