Az egyszerűbb HTML5 Canvas használatért

Canvas

A Canvas (vászon) egy remek dolog. Rajzolgathatunk rá kedvünkre, de ha komolyabb animációkat vagy esemény érzékeny objektumokat szeretnénk létrehozni, már több plusz sort kell rónunk. Pontosan ennek megsegítésére született több könyvtár is, amikkel a Canvas használat gördülékenyebb és egyszerűbb lesz. Most bemutatunk néhányat.

Ahogy sejtettük, az Internet Explorer a Canvas esetben sem kapott túl jó pontot, csupán a 9-es verziótól szerepel benne natív Canvas támogatás. Ezért érdemes beszerezni az ExplorerCanvas (ExCanvas) könyvtárat, amivel a 9-es verzió előtt is használhatjuk majd a vásznat (persze korlátozásokkal, mert tulajdonképpen a régi IE-k esetében Canvas helyett csak VML-t [vektor jelölőnyelv] használhatunk). Természetesen a régebbi böngészőkben komoly animációk enyhén szólva akadoznak, ezért a vászonnal való munka során érdemes szem előtt tartani, hogy mennyire is lesz bonyolult a vászonra rajzolt tartalom.

Érdemes tehát egyelőre a 2D-re összpontosítani, mert a 3D támogatottsága nem túl meggyőző és a legtöbb esetben nincs rá grafikai gyorsítás sem. Viszont kísérleti jelleggel minden féle képpen érdemes például a WebGL-el való ismerkedés.

Hagyományos könyvtárak

Gury

Gury

A jQuery kedvelőknek egy igazán remek Canvas könyvtár. Egyszerűen láncolhatjuk egymáshoz a eseményeket, animációkat és könnyedén módosíthatjuk a vásznunk beállításait, megjelenését. A dokumentáció nem a legjobb, de legalább kapunk egy jó nagy rakás minta kódot.

jCanvaScript

jCanvaScript

Hasonlóan a Gury-hoz, a jCS is a láncolhatóságra törekszik, az objektum létrehozás igen egyszerű és azok módosítása sem jelent nagy ügyet. Az eseménykezelő tekintetében külön ki van emelve hogy problémamentesen fut mobil böngészőkön is és nem csak egér-billentyűzet érzékeny, hanem a tapizást is megérti. Van hozzá egy remek dokumentáció temérdek hasznos függvény leírásával. Nem utolsó sorban pedig gyári Drag n Drop is van a kicsikében. (A kezdőlapon továbbá megemlítik az ExCanvas használatát, azaz biztosan törekednek a vele való kompatibilitásra.)

oCanvas

oCanvas

Ahogy neve is mutatja, egy Objektum-orientált Canvas könyvtárról van szó, nem csak hagyományos gépen, hanem tapicskolós készüléken is remekül működik. Az Gury és JCS könyvtáraktól eltérő módon dolgozik a kód, sokkal inkább emlékeztet a Flash-hez és a hozzá tartozó ActionScript-hez, mert hasonló az objektumkezelése és itt is van egy idővonal, amivel az animációkat teljes egészében kezünkben tarthatjuk. Sajnos kevesebb minta kódot kapunk és a dokumentáció is kissé furcsán lett összerakva, de ettől függetlenül nagyon jól használható könyvtár.

Processing.js

Processing.js

A legösszetettebb és legnagyobb (220 KB) könyvtár, amivel találkoztam. Ez egy asztali alkalmazás portolt változata, igazán hatékony az animációk készítésében. Érdemes végignézni a Demo fájljait, mert gyönyörű darabok akadnak a bemutatók között. Arról nem is beszélve, hogy a dokumentáció hihetetlen vastag. Egyszerűen minden van benne, ami szem s szájnak ingere. Internet Explorerben több-kevesebb sikerrel működik, viszont portolt mivolta lévén a többi Javascript könyvtárral lehet, hogy nem ápol túl jó viszont.

Vektoros megoldás

Az eddig felsorolt könyvtárak mind-mind a hagyományos Canvas-ra épülnek, ami ugyebár rasztergrafikus. Viszont van itt könyvtár, ami lehetővé teszi hogy vektorgrafikákkal dolgozzunk. Egyébként komolyabb könyvtár nélkül remekül lehetne dolgozni az XML alapú leírónyelvű SVG formátummal, de sajnálatos módon nincs rá megfelelő támogatás a böngészők részéről. Figyelem: A vektorgrafikus rajzolásról ildomos tudni, hogy több erőforrást igényel, azaz lassabban fut le mint a hagyományos Canvas.

Raphaël.js

Raphael

A Raphael egy kis könyvtár (60 KB), ami egyszerűvé teszi a vektorgrafikákkal történő munkát. A fő célja, hogy a lehető legtöbb böngészőn problémamentesen fusson. Alapvetően SVG formátumot használ, de a régebbi IE-k esetében a VML-t. A használata nagyon egyszerű és lévén a létrehozott objektumok szerepelnek a DOM-ban, azok hozzáférése is jóval egyszerűbb. A dokumentáció kissé ömlesztett lett, de mindenhol kapunk példakódot, ami segítségünkre lesz. Nagyon korrekt alternatíva a Canvas-szal szemben.

Példaoldalak, segítség

Demonstrációt célzó oldalak (sok esetben csak Google Chrome alatt működnek): BloBular (vektor), Chrome ExperimentsRome (interaktív videó és Canvas egyben).

Néhány oldal, ahol rengeteg infó és minta kód van a Canvas-ra rajzoláshoz (sajnos angolul, mert nem igazán van magyar dokumentáció): Dive into HTML5 – Let’s call it draw(ing surface), Mozilla Canvas tutorial, HTML5 Canvas tutorials

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!