HTML5 bevat een opwindend element genaamd CANVAS. Het heeft veel toepassingen, maar om het te gebruiken, moet je wat JavaScript leren, HTML, en soms CSS.
Dit maakt het CANVAS-element een beetje ontmoedigend voor veel ontwerpers, en in feite zullen de meesten waarschijnlijk negeren het element totdat er betrouwbare tools zijn om CANVAS-animaties en games te maken zonder het te weten JavaScript.
Waar wordt HTML5 Canvas voor gebruikt?
Het HTML5 CANVAS-element kan voor veel dingen worden gebruikt waarvoor u voorheen een ingesloten toepassing zoals Flash moest gebruiken om te genereren:
- Dynamische afbeeldingen
- Online en offline spellen
- Animaties
- Interactieve video en audio
De belangrijkste reden waarom mensen het CANVAS-element gebruiken, is dat het zo gemakkelijk is om een gewone webpagina om te slaan in een dynamische webapplicatie en zet die applicatie vervolgens om in een mobiele app voor gebruik op smartphones en tabletten.
Als we Flash hebben, waarom hebben we dan canvas nodig?
Volgens de
HTML5-specificatie, het CANVAS-element is: "... een resolutie-afhankelijk bitmap-canvas, dat kan worden gebruikt voor het weergeven van grafieken, game-graphics, kunst of andere visuele afbeeldingen in een oogwenk."Met het CANVAS-element kunt u in realtime grafieken, afbeeldingen, games, kunst en andere beelden rechtstreeks op de webpagina tekenen.
Je denkt misschien dat we dat al kunnen met Flash, maar er zijn twee grote verschillen tussen CANVAS en Flash:
- Het CANVAS-element is direct in de HTML ingebed. De scripts die erop gebaseerd zijn, bevinden zich in de HTML of in een gekoppeld extern bestand. Dit betekent dat het CANVAS-element een onderdeel is van het documentobjectmodel (DOM).
- Flash is een ingesloten extern bestand. Het gebruikt het EMBED- of het OBJECT-element om weer te geven en kan niet rechtstreeks communiceren met de andere HTML-elementen. Omdat het CANVAS-element deel uitmaakt van het DOM, kan het op veel manieren communiceren met het DOM.
- U kunt bijvoorbeeld een animatie maken die verandert wanneer er interactie is met een ander deel van de pagina, zoals een formulierelement dat wordt ingevuld. Met Flash kunt u het beste beginnen met de Flash-film of animatie, maar met CANVAS kun je veel verschillende effecten creëren, zelfs de tekst uit het formulierveld toevoegen aan de animatie.
- CANVAS-element wordt standaard ondersteund door webbrowsers. Om ervoor te zorgen dat gebruikers Flash daadwerkelijk kunnen gebruiken, moet de plug-in in hun browser zijn geïnstalleerd. Dit is vaak een probleem voor de meeste mensen vanwege verouderde Flash-installaties of het feit dat hun besturingssysteem het gewoon niet ondersteunt.
- Vroeger had elke browser de plug-in geïnstalleerd, maar dat is niet langer het geval en velen verwijderen de plug-in zelfs vanwege problemen. Bovendien is het niet eens beschikbaar op de populaire iOS-platform.
Canvas is handig, zelfs als je nooit van plan was om Flash te gebruiken
Een van de belangrijkste redenen waarom het CANVAS-element zo verwarrend is, is dat veel ontwerpers gewend zijn geraakt aan een volledig statisch web. Afbeeldingen kunnen worden geanimeerd, maar dat is gedaan met GIF, en natuurlijk kun je video insluiten in pagina's, maar nogmaals, het is een statische video die gewoon op de pagina staat en misschien begint of stopt vanwege interactie, maar dat is alles.
Met het CANVAS-element kunt u zoveel meer interactiviteit aan uw webpagina's toevoegen, omdat u nu de afbeeldingen, afbeeldingen en tekst dynamisch kunt besturen met een scripttaal. Met het CANVAS-element kunt u afbeeldingen, foto's, grafieken en grafieken omzetten in geanimeerde elementen.
Wanneer te overwegen om het Canvas-element te gebruiken?
Uw publiek moet uw eerste overweging zijn bij de beslissing om het CANVAS-element te gebruiken.
Als uw publiek voornamelijk gebruikt Windows XP en IE 6, 7 of 8, dan is het maken van een dynamische canvasfunctie zinloos omdat die browsers dit niet ondersteunen.
Als u een toepassing bouwt die alleen op Windows-machines wordt gebruikt, is Flash misschien de beste keuze. Een applicatie voor gebruik op Windows- en Mac-computers kan baat hebben bij een Silverlight-applicatie.
Als uw applicatie echter zowel op mobiele apparaten (zowel Android als iOS) als modern moet worden bekeken, desktopcomputers (bijgewerkt naar de nieuwste browserversies), dan is het gebruik van het CANVAS-element een goede keuze.
Houd er rekening mee dat als u dit element gebruikt, u terugvalopties hebt, zoals statische afbeeldingen voor oudere browsers die dit niet ondersteunen.
Het wordt echter niet aanbevolen om HTML5-canvas voor alles te gebruiken. Je zou moeten nooit gebruik het voor zaken als je logo, kop of navigatie (hoewel het prima zou zijn om het te gebruiken om een deel van een van deze te animeren).
Volgens de specificatie moet u de elementen gebruiken die het meest geschikt zijn voor wat u probeert te bouwen. Dus het gebruik van het HEADER-element samen met afbeeldingen en tekst heeft de voorkeur boven het CANVAS-element voor uw koptekst en logo.
Ook als u een webpagina of toepassing die bedoeld is om te worden gebruikt in een niet-interactief medium zoals afdrukken, moet u zich ervan bewust zijn dat het CANVAS-element dat dynamisch is bijgewerkt, mogelijk niet wordt afgedrukt zoals u verwacht. Mogelijk krijgt u een afdruk van de huidige inhoud of van de reserveinhoud.