HTML5 tartalmaz egy izgalmas elemet, a CANVAS nevet. Sok felhasználási lehetősége van, de a használatához meg kell tanulnia néhány JavaScript-et, HTML, és néha CSS.
Ez sok tervező számára kissé ijesztővé teszi a CANVAS elemet, és valójában a legtöbben valószínűleg figyelmen kívül hagyják mindaddig, amíg nem állnak rendelkezésre megbízható eszközök a CANVAS animációk és játékok készítéséhez anélkül, hogy tudnák JavaScript.
Mire használható a HTML5 vászon
A HTML5 CANVAS elem sok mindenre használható, amelyekhez korábban egy beágyazott alkalmazást kellett használni, például a Flash-t:
- Dinamikus grafika
- Online és offline játékok
- Animációk
- Interaktív videó és hang
Valójában a CANVAS elem használatának fő oka az, hogy mennyire egyszerű egy sima weboldalt megfordítani dinamikus webalkalmazássá, majd konvertálja az alkalmazást mobilalkalmazássá okostelefonokra és tabletek.
Ha van Flashünk, miért van szükségünk vászonra?
Szerint a HTML5 specifikáció, a CANVAS elem a következő: „... felbontástól függő bitkép-vászon, amely grafikonok, játékgrafikák, művészeti elemek vagy más vizuális képek rendereléséhez használható.”
A CANVAS elem segítségével valós időben, közvetlenül a weboldalon rajzolhat grafikonokat, grafikákat, játékokat, művészeti elemeket és egyéb képeket.
Lehet, hogy arra gondolsz, hogy ezt már meg tudjuk csinálni a Flash használatával, de két fő különbség van a CANVAS és a Flash között:
- A CANVAS elem be van ágyazva közvetlenül a HTML-be. A rajta lévő szkriptek vagy a HTML-ben, vagy egy csatolt külső fájlban találhatók. Ez azt jelenti, hogy a CANVAS elem a dokumentum objektum modell (DOM) része.
- A Flash egy beágyazott külső fájl. A megjelenítéshez vagy az EMBED, vagy az OBJECT elemet használja, és nem léphet közvetlenül kapcsolatba a többi HTML-elemmel. Mivel a CANVAS elem a DOM része, sokféleképp léphet kapcsolatba a DOM-mal.
- Létrehozhat például egy animációt, amely akkor változik, amikor az oldal más részével interakcióba lépnek - például kitöltenek egy űrlap elemet. A Flash használatával a legtöbbet megteheti, ha elindítja a Flash film vagy animáció, de a CANVAS segítségével sokféle effektust hozhat létre, akár az űrlapmező szövegét is hozzáadhatja az animációhoz.
- A CANVAS elemet natívan támogatják a webböngészők. Ahhoz, hogy a felhasználók valóban használhassák a Flash-t, böngészőjüknek telepítenie kell a bővítményt. Ez a legtöbb ember számára gyakran gondot okoz az elavult Flash-telepítések miatt, vagy az a tény, hogy az operációs rendszerük egyszerűen nem támogatja.
- Korábban minden böngészőben telepítve volt a plugin, de ez már nem így van, és sokan még a plugint is eltávolítják nehézségek miatt. Ráadásul nem is elérhető a népszerűnél iOS platform.
A vászon akkor is hasznos, ha soha nem tervezte a Flash használatát
Az egyik fő oka annak, hogy a CANVAS elem annyira zavaró, hogy sok tervező megszokta a teljesen statikus webet. A képek animáltak lehetnek, de ezzel kész GIF, és természetesen beágyazhat videót oldalakba, de ez megint egy statikus videó, amely egyszerűen az oldalon ül, és talán az interakció miatt indul vagy áll le, de ez minden.
A CANVAS elem lehetővé teszi, hogy sokkal több interaktivitást adjon a weboldalakhoz, mert most dinamikusan vezérelheti a grafikákat, képeket és szövegeket egy szkriptnyelv segítségével. A CANVAS elem segít a képek, fényképek, diagramok és grafikonok animált elemekké alakításában.
Mikor érdemes megfontolni a Vászon elem használatát
A közönségnek kell az első szempontnak lennie, amikor eldönti, hogy használja-e a CANVAS elemet.
Ha a közönséged elsősorban használja Windows XP és IE 6, 7 vagy 8, akkor a dinamikus vászon szolgáltatás létrehozása értelmetlen lesz, mivel ezek a böngészők nem támogatják.
Ha olyan alkalmazást épít, amelyet csak Windows gépeken fog használni, akkor a Flash lehet a legjobb megoldás. A Windows és Mac számítógépeken használható alkalmazások számára előnyös lehet a Silverlight alkalmazás.
Ha azonban alkalmazását mobileszközökön (Android és iOS egyaránt), valamint korszerűnek kell tekintenie asztali számítógépek (frissítve a legújabb böngészőverziókra), akkor a CANVAS elem használata jó választás.
Ne feledje, hogy ennek az elemnek a használatával olyan tartalék opciók állnak rendelkezésre, mint a statikus képek a régebbi böngészők számára, amelyek nem támogatják.
Nem ajánlott azonban mindenhez HTML5 vásznat használni. Neked kellene soha használja például logójához, címsorához vagy navigációjához (bár ezek bármelyikének animálására jó lenne).
A specifikáció szerint azokat az elemeket kell használni, amelyek a legalkalmasabbak arra, amire építeni próbál. Tehát a HEADER elemet képekkel és szövegekkel együtt előnyösebb használni, mint a fejléc és a logó CANVAS elemét.
Továbbá, ha a honlap vagy olyan alkalmazás, amelyet nem interaktív adathordozóban, például nyomtatásban kívánnak használni, tudnia kell, hogy a dinamikusan frissített CANVAS elem nem biztos, hogy az Ön elvárásainak megfelelően nyomtat. Lehet, hogy kinyomtatja az aktuális tartalmat vagy a tartalék tartalmat.