HTML5 innehåller ett spännande element som heter CANVAS. Den har många användningsområden, men för att kunna använda den måste du lära dig lite JavaScript, HTML, och ibland CSS.
Detta gör CANVAS-elementet lite skrämmande för många designers, och faktiskt kommer de flesta förmodligen att ignorera elementet tills det finns tillförlitliga verktyg för att skapa CANVAS-animationer och spel utan att veta JavaScript.
Vad HTML5 Canvas används för
HTML5 CANVAS-elementet kan användas för många saker som tidigare, du var tvungen att använda en inbäddad applikation som Flash för att generera:
- Dynamisk grafik
- Online och offline spel
- Animationer
- Interaktiv video och ljud
Faktum är att den främsta anledningen till att människor använder CANVAS-elementet är på grund av hur lätt det är att skapa en vanlig webbsida till en dynamisk webbapplikation och sedan konvertera den applikationen till en mobilapp för användning på smartphones och tabletter.
Om vi har blixt, varför behöver vi canvas?
Enligt HTML5-specifikation
, CANVAS-elementet är: “... en upplösningsberoende bitmappduk, som kan användas för att återge grafer, speldiagram, konst eller andra visuella bilder i farten.”Med CANVAS-elementet kan du rita diagram, grafik, spel, konst och andra bilder direkt på webbsidan i realtid.
Du kanske tänker att vi redan kan göra det med Flash, men det finns två stora skillnader mellan CANVAS och Flash:
- CANVAS-elementet är inbäddat direkt i HTML-koden. Skripten som dras på den finns antingen i HTML-filen eller i en länkad extern fil. Detta betyder att CANVAS-elementet är en del av dokumentobjektmodellen (DOM).
- Flash är en inbäddad extern fil. Den använder antingen EMBED- eller OBJECT-elementet för att visa och kan inte interagera direkt med de andra HTML-elementen. Eftersom CANVAS-elementet är en del av DOM kan det interagera med DOM på många sätt.
- Du kan till exempel skapa en animation som ändras när någon annan del av sidan interageras med - till exempel ett formulärelement som fylls i. Med Flash är det mest du kan göra att starta Flash-film eller animering, men med CANVAS kan du skapa många olika effekter, till och med lägga till texten från formulärfältet i animationen.
- CANVAS-element stöds av webbläsare. För att användare ska kunna använda Flash måste deras webbläsare ha plugin installerat. Detta är ofta ett besvär för de flesta på grund av föråldrade Flash-installationer eller det faktum att deras operativsystem helt enkelt inte stöder det.
- Det brukade vara så att alla webbläsare hade plugin installerat, men så är det inte längre, och många tar till och med bort plugin på grund av svårigheter. Dessutom är det inte ens tillgängligt på det populära iOS-plattform.
Canvas är användbart även om du aldrig planerat att använda blixt
En av de främsta anledningarna till att CANVAS-elementet är så förvirrande är att många designers har vant sig vid ett helt statiskt nät. Bilder kan vara animerade, men det är gjort med GIF, och naturligtvis kan du bädda in video på sidor men igen, det är en statisk video som helt enkelt sitter på sidan och kanske startar eller slutar på grund av interaktion, men det är allt.
Med CANVAS-elementet kan du lägga till så mycket mer interaktivitet på dina webbsidor, för nu kan du styra grafik, bilder och text dynamiskt med ett skriptspråk. CANVAS-elementet hjälper dig att förvandla bilder, foton, diagram och grafer till animerade element.
När ska man överväga att använda Canvas-elementet
Din målgrupp bör vara ditt första övervägande när du bestämmer om du vill använda CANVAS-elementet.
Om din publik främst använder Windows XP och IE 6, 7 eller 8, då kommer det att vara meningslöst att skapa en dynamisk canvas-funktion eftersom dessa webbläsare inte stöder den.
Om du bygger ett program som endast kommer att användas på Windows-maskiner kan Flash vara din bästa insats. Ett program som ska användas på Windows- och Mac-datorer kan dra nytta av ett Silverlight-program.
Men om din applikation måste ses på mobila enheter (både Android och iOS) såväl som modern stationära datorer (uppdaterade till de senaste webbläsarversionerna), då är det ett bra val att använda CANVAS-elementet.
Tänk på att med hjälp av detta element kan du ha reservalternativ som statiska bilder för äldre webbläsare som inte stöder det.
Det rekommenderas dock inte att använda HTML5-duk för allt. Du borde aldrig använd den för saker som din logotyp, rubrik eller navigering (även om du använder den för att animera en del av något av dessa skulle det vara bra).
Enligt specifikationen bör du använda de element som passar bäst för det du försöker bygga. Så att använda HEADER-elementet tillsammans med bilder och text är att föredra framför CANVAS-elementet för din rubrik och logotyp.
Om du skapar en webbsida eller applikation som är avsedd att användas i ett icke-interaktivt medium som utskrift, bör du vara medveten om att CANVAS-elementet som har uppdaterats dynamiskt kanske inte skrivs ut som du förväntar dig. Du kan få en utskrift av det aktuella innehållet eller av reservinnehållet.