HTML5 ietver aizraujošu elementu ar nosaukumu CANVAS. Tam ir daudz lietojumu, taču, lai to izmantotu, jums jāapgūst daži JavaScript, HTML, un dažreiz CSS.
Tas padara CANVAS elementu mazliet biedējošu daudziem dizaineriem, un patiesībā lielākā daļa, iespējams, to ignorēs elements, kamēr nav uzticamu rīku, lai, nezinot, izveidotu CANVAS animācijas un spēles JavaScript.
Kādam nolūkam tiek izmantots HTML5 audekls
HTML5 CANVAS elementu var izmantot daudzām lietām, kuru ģenerēšanai iepriekš bija jāizmanto iegulta lietojumprogramma, piemēram, Flash:
- Dinamiskā grafika
- Spēles tiešsaistē un bezsaistē
- Animācijas
- Interaktīvs video un audio
Patiesībā galvenais iemesls, kāpēc cilvēki izmanto CANVAS elementu, ir tāpēc, ka ir viegli pārvērst vienkāršu tīmekļa lapu par dinamisku tīmekļa lietojumprogrammu un pēc tam pārveidojiet šo lietojumprogrammu par mobilo lietotni lietošanai viedtālruņos un tabletes.
Ja mums ir zibspuldze, kāpēc mums ir nepieciešams audekls?
Saskaņā ar HTML5 specifikācija, CANVAS elements ir: “... no izšķirtspējas atkarīgs bitkartes audekls, ko var izmantot grafiku, spēļu grafikas, mākslas vai citu vizuālu attēlu renderēšanai.”
CANVAS elements ļauj jums reāllaikā tieši vietnē izveidot zīmējumus, grafikas, spēles, mākslu un citus attēlus.
Jūs varētu domāt, ka mēs to jau varam paveikt ar Flash, taču starp CANVAS un Flash ir divas būtiskas atšķirības:
- CANVAS elements ir iestrādāts tieši HTML. Skripti, kas to izmanto, atrodas HTML vai saistītā ārējā failā. Tas nozīmē, ka CANVAS elements ir dokumenta objekta modeļa (DOM) sastāvdaļa.
- Flash ir iegults ārējs fails. Lai parādītu, tas izmanto vai nu EMBED, vai OBJECT elementu, un tas nevar tieši mijiedarboties ar citiem HTML elementiem. Tā kā elements CANVAS ir daļa no DOM, tas var mijiedarboties ar DOM daudzos veidos.
- Piemēram, jūs varat izveidot animāciju, kas mainās, mijiedarbojoties ar kādu citu lapas daļu, piemēram, aizpildot formas elementu. Izmantojot Flash, visvairāk jūs varētu darīt, ja sāktu Flash filma vai animāciju, bet ar CANVAS jūs varētu izveidot daudz dažādu efektu, pat pievienojot tekstu no formas lauka animācijā.
- CANVAS elementu dabiski atbalsta tīmekļa pārlūkprogrammas. Lai lietotāji faktiski varētu izmantot Flash, viņu pārlūkprogrammā ir jābūt instalētam spraudnim. Lielākajai daļai cilvēku tas bieži sagādā grūtības novecojušu Flash instalēšanas gadījumu vai fakta dēļ, ka viņu operētājsistēma to vienkārši neatbalsta.
- Kādreiz bija tā, ka katrā pārlūkprogrammā bija instalēts spraudnis, taču tas tā vairs nav, un daudzi grūtību dēļ pat noņem spraudni. Turklāt tas nav pieejams pat populārajā iOS platforma.
Audekls ir noderīgs, pat ja jūs nekad neplānojāt izmantot Flash
Viens no galvenajiem iemesliem, kāpēc CANVAS elements ir tik mulsinošs, ir tas, ka daudzi dizaineri ir pieraduši pie pilnīgi statiskas tīmekļa. Attēli var būt animēti, taču tas tiek darīts GIF, un, protams, jūs varat iegult video lapās, bet atkal tas ir statisks video, kas vienkārši atrodas lapā un, iespējams, sākas vai apstājas mijiedarbības dēļ, bet tas arī viss.
CANVAS elements ļauj jums pievienot daudz vairāk interaktivitātes jūsu tīmekļa lapām, jo tagad jūs varat dinamiski kontrolēt grafiku, attēlus un tekstu, izmantojot skriptu valodu. CANVAS elements palīdz pārveidot attēlus, fotoattēlus, diagrammas un diagrammas par animētiem elementiem.
Kad jāapsver iespēja izmantot audekla elementu
Jūsu auditorijai vajadzētu būt jūsu pirmajam apsvērumam, izlemjot, vai izmantot CANVAS elementu.
Ja jūsu auditorija galvenokārt izmanto Windows XP un IE 6, 7 vai 8, tad dinamiskas audekla funkcijas izveide būs bezjēdzīga, jo šīs pārlūkprogrammas to neatbalsta.
Ja veidojat lietojumprogrammu, kas tiks izmantota tikai Windows datoros, Flash varētu būt jūsu labākais risinājums. Lietojumprogrammai, kas jāizmanto Windows un Mac datoros, varētu būt noderīga Silverlight lietojumprogramma.
Tomēr, ja jūsu lietojumprogramma ir jāaplūko mobilajās ierīcēs (gan Android, gan iOS), kā arī moderna galddatori (atjaunināti uz jaunākajām pārlūkprogrammas versijām), tad CANVAS elementa izmantošana ir laba izvēle.
Paturiet prātā, ka šī elementa izmantošana ļauj izmantot rezerves opcijas, piemēram, statiskus attēlus vecākām pārlūkprogrammām, kuras to neatbalsta.
Tomēr visam nav ieteicams izmantot HTML5 audeklu. Jums vajadzētu nekad izmantojiet to tādām lietām kā jūsu logotips, virsraksts vai navigācija (lai gan to izmantot, lai animētu daļu no šiem, būtu labi).
Saskaņā ar specifikāciju jums jāizmanto elementi, kas ir vispiemērotākie tam, ko mēģināt veidot. Tāpēc galvenei un logotipam ir vēlams izmantot HEADER elementu kopā ar attēliem un tekstu, nevis CANVAS elementu.
Turklāt, ja veidojat tīmekļa lapu vai lietojumprogrammu, kuru paredzēts izmantot neinteraktīvā vidē, piemēram, drukāšanā, jums jāapzinās, ka dinamiski atjauninātais CANVAS elements, iespējams, netiks izdrukāts, kā jūs gaidījāt. Iespējams, jūs saņemsit pašreizējā vai rezerves satura druku.