HTML5 lõuend: mis see on ja miks seda kasutatakse

HTML5 sisaldab põnevat elementi nimega CANVAS. Sellel on palju kasutusviise, kuid selle kasutamiseks peate õppima JavaScripti, HTMLja mõnikord CSS.

See muudab CANVAS-elemendi paljude disainerite jaoks pisut hirmutavaks ja tegelikult enamik ilmselt eirab seda elementi, kuni on olemas usaldusväärsed tööriistad CANVASi animatsioonide ja mängude loomiseks teadmata JavaScripti.

Milleks HTML5 lõuendit kasutatakse

Elementi HTML5 CANVAS saab kasutada paljude asjade jaoks, mille loomiseks pidite varem kasutama manustatud rakendust nagu Flash.

• Dünaamiline graafika
• Online- ja offline-mängud
• Animatsioonid
• Interaktiivne video ja heli

Tegelikult on peamine põhjus, miks inimesed CANVAS-elementi kasutavad, seetõttu, et kui lihtne on tavalist veebilehte keerata dünaamiliseks veebirakenduseks ja teisendage see rakendus seejärel nutitelefonides kasutamiseks mõeldud mobiilirakenduseks ja tabletid.

Kui meil on välklamp, siis miks me vajame lõuendit?

Vastavalt HTML5 spetsifikatsioon, CANVAS-i element on: "... eraldusvõimest sõltuv bitmap-lõuend, mida saab kasutada graafikute, mängugraafika, kunsti või muude visuaalsete piltide renderdamiseks lennult."

Element CANVAS võimaldab teil reaalajas otse veebisaidile joonistada graafikuid, graafikat, mänge, kunsti ja muid visuaale.

Võib-olla mõtlete, et Flashiga saame seda juba teha, kuid CANVASe ja Flashi vahel on kaks suurt erinevust:

1. CANVAS-element on manustatud otse HTML-i. Sellele joonistuvad skriptid on kas HTML-is või lingitud välises failis. See tähendab, et CANVAS-element on osa dokumendi objektimudelist (DOM).
   1. Flash on sisseehitatud väline fail. See kasutab kuvamiseks kas EMBED- või OBJECT-elementi ega saa teiste HTML-elementidega otse suhelda. Kuna CANVAS-element on osa DOM-ist, saab see DOM-iga suhelda mitmel viisil.
   2. Näiteks võite luua animatsiooni, mis muutub siis, kui suheldakse mõne muu lehe osaga - näiteks täidetakse vormielementi. Flashi abil saaksite kõige rohkem käivitada Flash-film või animatsiooni, kuid CANVAS-i abil saate luua palju erinevaid efekte, lisades isegi vormiväljal oleva teksti animatsiooni.
2. Veebibrauserid toetavad elementi CANVAS. Selleks, et kasutajad saaksid Flassi reaalselt kasutada, peab nende brauseril olema pistikprogramm installitud. Sageli on see enamiku inimeste jaoks tülikas vanade Flashi installimiste või asjaolu tõttu, et nende operatsioonisüsteem seda lihtsalt ei toeta.
   1. Varem oli see, et igale brauserile oli pistikprogramm installitud, kuid see pole enam nii ja paljud eemaldavad pistikprogrammi isegi raskuste tõttu. Lisaks pole see isegi populaarses versioonis saadaval iOS-i platvorm.

Lõuend on kasulik isegi siis, kui te ei plaaninud kunagi Flashi kasutada

Üks peamisi põhjuseid, miks CANVAS-element nii segane on, on see, et paljud disainerid on harjunud täiesti staatilise veebiga. Kujutised võivad olla animeeritud, kuid sellega tehakse GIFja muidugi saate videot lehtedele manustada, kuid jällegi on see staatiline video, mis lihtsalt istub lehel ja võib-olla algab või peatub interaktsiooni tõttu, kuid see on ka kõik.

CANVAS-element võimaldab teil oma veebilehtedele lisada palju rohkem interaktiivsust, sest nüüd saate skriptikeelega graafikat, pilte ja teksti dünaamiliselt juhtida. CANVAS-element aitab teil muuta pildid, fotod, diagrammid ja graafikud animeeritud elementideks.

Millal kaaluda lõuendi elemendi kasutamist

CANVAS-elemendi kasutamise otsustamisel peaks teie vaatajaskond olema teie esimene kaalutlus.

Kui teie publik kasutab peamiselt Windows XP ja IE 6, 7 või 8, siis on dünaamilise lõuendi funktsiooni loomine mõttetu, kuna need brauserid seda ei toeta.

Kui ehitate rakendust, mida kasutatakse ainult Windowsi masinates, võib Flash olla teie parim valik. Rakendusele, mida kasutatakse Windowsi ja Maci arvutites, võib Silverlighti rakendus olla kasulik.

Kuid kui teie rakendust tuleb vaadata nii mobiilseadmetes (nii Androidis kui ka iOS-is) kui ka kaasaegsena lauaarvutid (uuendatud brauseri uusimatele versioonidele), siis on CANVAS-elemendi kasutamine hea valik.

Pidage meeles, et selle elemendi kasutamine võimaldab teil varuvalikuid, näiteks staatilisi pilte vanematele brauseritele, mis seda ei toeta.

Kõigeks ei soovitata siiski kasutada HTML5 lõuendit. Sa peaksid mitte kunagi kasutage seda näiteks oma logo, pealkirja või navigeerimise jaoks (ehkki mõne neist osa animeerimiseks oleks see hea).

Vastavalt spetsifikatsioonile peaksite kasutama elemente, mis sobivad kõige paremini teie ehitamiseks. Seega on päise ja logo jaoks eelistatav HEADER elemendi kasutamine koos piltide ja tekstiga CANVAS elemendi asemel.

Samuti, kui loote a veebileht või rakenduses, mis on mõeldud kasutamiseks mitteinteraktiivses andmekandjas, näiteks printimisel, peaksite olema teadlik, et dünaamiliselt värskendatud CANVAS-element ei pruugi printida ootuspäraselt. Võimalik, et saate printida praeguse sisu või varusisu.