Canvas

Mint legutóbb láthattad, lehet animációt, "arcade" stílusú játékot csinálni html elemek megjelenítésére, pozícionálására alapozva, azonban ez nem ideális. A HTML szabvány dokumentum megjelenítésére lett megalkotva, nem mozgó sprite-ok dinamikus, interaktív kezelésére.
Nagy megterhelést jelent a böngészőnek az egyes html elemek megváltoztatása után újrakalkulálni és újramegjeleníteni az egész oldalt, az erre történő optimalizáció szinte már külön tudományág.
Néhány évvel ezelőttig a webes programozók mást nem tehettek, ha mindenáron böngészőben futó játékot akartak készíteni: vagy a lassú html manipulálás, vagy a beépülő flash (vagy más beépülő) maradt a számukra.
Mostanában azonban más lehetőségek is vannak: a canvas használata már minden elterjedt böngészőben lehetséges, még mobil eszközökön is.



A canvas-on már nem dokumentumot jelenítünk meg, hanem rajzot, képet, képpontokat.

A canvas a html oldalon belül bárhol elhelyezkedhet egy téglalap alakú területen, ezen belül a html-hez már nem lesz köze.

A canvas demonstrálására elkészítettem neked a pattogó labda canvasos változatát, íme:

http://jsfiddle.net/jJ5Q3/2/

Mint láthatod a jsfiddle html szekciójában (bal-fenn), a html oldal csak egy canvasból áll.

A javascriptben egy új függvény van, a "labdarajzolo", ami az adott x koordinátára kitesz egy labdát.
A "mozgato" csak egy kicsit változott: nem egy div elem pozícióját változtatjuk, hanem kirajzoljuk benne minden harmincadik ezredmásodpercben az egész képet (! igen az egész canvast ! ) a "labdarajzolo" segítségével. A canvas (vászon) nem törlődik magától (ez hasznos, hogyha rajzolóprogramot akarunk készíteni, stb.) ezért a clearRect segítségével minden új állapotban ki kell törölnünk az egészet. (Ez persze nem teljesen szükséges: lehetne úgy is optimalizálni, hogy csak a változások helyén végzünk törléseket, esetünkben például nem kéne kitörölni az egész vásznat, csak az előző állapotbeli labdát kéne eltüntetni, sőt, csak azon részét, ami az új állapotban nincs fedésben a régivel. Esetünkben azonban az egyszerűségre törekedhetünk)

Kérdés lehet, hogy miért van megadva a javascript részben is a canvas mérete és a css részben is?

Nem lenne szükséges a css-ben megadni, de be akartam mutatni, hogy a két méretezés mást jelent: a canvas elem width tulajdonsága azt jelenti, hogy hány képpontos a vászon szélessége, míg a canvas.style.width segítségével azt adhatjuk meg, hogy a böngésző ezt hány képpontban jelenítse meg. A canvas tehát olyan, mint egy kép: a felbontása adott, de a megjelenítésének mérete külön szabályozható (akár százalékosan is).

Próbáld ki: a css szekcióban javítsd ki a {position:absolute;width:300px;height:300px;background:#DDD}
résznél a width:300px-et mondjuk 400px-re. Mi fog történni?

Feladatok:
1. Kotorj bele a canvas rajzolási képességeibe, keresd ki, hogy hogyan lehet kört rajzolni, és javítsd ki a labdát kör alakúra ( a ctx.rect részt kell valami másra módosítani).
2: Módosítsd a labdarajzolo függvényt, hogy egy y paramétert is fogadjon, majd az egész progit, hogy a labda fel-le is pattogjon (kövesd az előző bejegyzésbeli javaslatokat is)

Kellemes pattogtatást!