Hierdie element het voordele bo ander tegnologie
HTML5 bevat 'n opwindende element genaamd CANVAS. Dit het baie gebruike, maar om dit te kan gebruik, moet jy JavaScript, HTML, en soms CSS leer.
Dit maak die CANVAS-element 'n bietjie skrik vir baie ontwerpers, en die meeste sal waarskynlik die element ignoreer totdat daar betroubare gereedskap is om CANVAS animasies en speletjies te skep sonder om JavaScript te ken.
Watter HTML5-doek word gebruik vir
Die HTML5 CANVAS-element kan gebruik word vir baie dinge wat voorheen 'n ingebedde program soos Flash gehad het om te genereer:
- dinamiese grafika
- aanlyn en offline speletjies
- animasies
- interaktiewe video en klank
Trouens, die hoofrede waarom mense die CANVAS-element gebruik, is omdat dit maklik is om 'n gewone webblad in 'n dinamiese webprogram te omskep en dan die aansoek om te skakel na 'n mobiele program vir gebruik op slimfone en tablette.
As ons Flash het, Hoekom het ons Canvas nodig?
Volgens die HTML5-spesifikasie is die CANVAS-element:
"... 'n resolusie-afhanklike bitmap-doek, wat gebruik kan word om grafieke, spelgrafika, kuns of ander visuele beelde op die vlieg te lewer."Met die CANVAS-element kan jy in real-time grafieke, grafika, speletjies, kuns en ander beeldmateriaal op die webblad teken.
Jy kan dink dat ons dit al met Flash kan doen, maar daar is twee groot verskille tussen CANVAS en Flash:
- Die CANVAS-element is direk in die HTML ingebed. Die skrifte wat daarop trek, is óf in die HTML of in 'n gekoppelde eksterne lêer. Dit beteken dat die CANVAS-element deel uitmaak van die dokumentvoorwerpmodel, of DOM.
- Flash is 'n ingeboude eksterne lêer. Dit gebruik óf die EMBED of die OBJECT element om te vertoon, en kan nie direk met die ander HTML-elemente interaksie hê nie. Omdat die CANVAS-element deel van die DOM is, kan dit op verskeie maniere met die DOM in wisselwerking tree.
- Byvoorbeeld, jy kan 'n animasie skep wat verander as 'n ander deel van die bladsy met mekaar gehandel word, soos 'n vormelement wat ingevul word. Met Flash kan die meeste wat jy kan doen, die Flash-fliek of animasie begin, maar met CANVAS jy kan baie verskillende effekte skep, selfs die teks van die vorm veld in die animasie.
- Die CANVAS-element word normaalweg ondersteun deur webblaaiers. Om te verseker dat gebruikers eintlik Flash gebruik, moet hul blaaier die plugin geïnstalleer het. Dit is dikwels 'n probleem vir die meeste mense weens verouderde Flash-installerings of die feit dat hul bedryfstelsel dit eenvoudig nie ondersteun nie.
- Dit was altyd dat elke blaaier die plugin geïnstalleer het, maar dit is nie meer die geval nie, en baie verwyder selfs die prop as gevolg van probleme. Plus, dit is nie eens beskikbaar op die gewilde iOS-platform nie.
Canvas is nuttig, selfs as jy nooit beplan om Flash te gebruik
Een van die hoofredes waarom die CANVAS-element so verwarrend is, is dat baie ontwerpers gewoond geraak het aan 'n heeltemal statiese web. Prente kan geanimeer word, maar dit is gedoen met GIF, en natuurlik kan jy video in bladsye installeer, maar weer is dit 'n statiese video wat eenvoudig op die bladsy sit en miskien begin of stop as gevolg van interaksie, maar dis alles.
Die CANVAS-element laat jou toe om soveel meer interaktiwiteit aan jou webblaaie by te voeg, want nou kan jy die grafika, beelde en teks dinamies met 'n skripsie taal beheer. Die CANVAS-element help jou om beelde, foto's, grafieke en grafieke in geanimeerde elemente te verander.
Wanneer om te oorweeg om die Canvas Element te gebruik
Jou gehoor moet jou eerste oorweging wees wanneer jy besluit om die CANVAS-element te gebruik.
As jou gehoor hoofsaaklik Windows XP en IE 6, 7 of 8 gebruik, sal die skep van 'n dinamiese doekfunksie nutteloos wees aangesien die blaaiers dit nie ondersteun nie.
As jy 'n program bou wat slegs op Windows-masjiene gebruik word, kan Flash jou beste weddenskap wees. 'N Program wat op Windows- en Mac-rekenaars gebruik kan word, kan voordeel trek uit 'n Silverlight-aansoek.
As jou aansoek egter op mobiele toestelle (beide Android en iOS) sowel as moderne rekenaarrekenaars (opgedateer na die nuutste blaaier weergawes) besigtig moet word, dan is die gebruik van die CANVAS-element 'n goeie keuse.
Hou in gedagte dat die gebruik van hierdie element u toelaat om terugvalopsies te hê, soos statiese beelde vir ouer blaaiers wat dit nie ondersteun nie.
Dit word egter nie aanbeveel om HTML5-doek vir alles te gebruik nie. Jy moet dit nooit gebruik vir dinge soos jou logo, kop, of navigasie nie (alhoewel dit gebruik word om 'n gedeelte van enige van hierdie te skep, sal dit goed wees).
Volgens die spesifikasie moet jy die elemente gebruik wat die beste geskik is vir wat jy probeer bou. Die gebruik van die HEADER-element saam met beelde en teks is dus beter as die CANVAS-element vir jou kop en logo.
As jy ook 'n webblad of program skep wat bedoel is om in 'n nie-interaktiewe medium soos drukwerk gebruik te word, moet jy daarvan bewus wees dat die CANVAS-element wat dinamies opgedateer is, nie kan druk soos jy verwag nie. U kan dalk 'n druk van die huidige inhoud of van die terugval-inhoud kry.