HTML5 apima įdomų elementą, pavadintą CANVAS. Jis turi daugybę naudojimo būdų, tačiau norint jį naudoti, reikia išmokti šiek tiek „JavaScript“, HTML, ir kartais CSS.
Dėl to CANVAS elementas daugeliui dizainerių tampa šiek tiek bauginantis, ir iš tikrųjų dauguma jų tikriausiai nepaisys elementą tol, kol bus patikimų įrankių CANVAS animacijoms ir žaidimams kurti nežinant „JavaScript“.
Kam naudojama HTML5 drobė
HTML5 CANVAS elementas gali būti naudojamas daugeliui dalykų, kuriuos anksčiau turėjote naudoti įterptą programą, pvz., „Flash“:
- Dinaminė grafika
- Internetiniai ir neprisijungę žaidimai
- Animacijos
- Interaktyvus vaizdo ir garso įrašas
Iš tikrųjų pagrindinė priežastis, kodėl žmonės naudoja elementą CANVAS, yra dėl to, kaip lengva paversti paprastą tinklalapį į dinaminę žiniatinklio programą ir konvertuokite ją į programą mobiliesiems, skirtą naudoti išmaniuosiuose telefonuose ir tabletės.
Jei turime „Flash“, kam mums reikia drobės?
Pagal HTML5 specifikacija, CANVAS elementas yra: „... nuo raiškos priklausanti bitmap drobė, kuri gali būti naudojama grafikams, žaidimų grafikai, menams ar kitiems vaizdiniams vaizdams pateikti skriejant“.
CANVAS elementas leidžia realiuoju laiku piešti grafikus, grafiką, žaidimus, meną ir kitus vaizdus tiesiog tinklalapyje.
Galbūt galvojate, kad mes jau galime tai padaryti naudodami „Flash“, tačiau yra du pagrindiniai skirtumai tarp „CANVAS“ ir „Flash“:
- CANVAS elementas yra įdėtas tiesiai į HTML. Ant jo piešiami scenarijai yra HTML arba susietame išoriniame faile. Tai reiškia, kad CANVAS elementas yra dokumento objekto modelio (DOM) dalis.
- „Flash“ yra įdėtas išorinis failas. Rodymui naudojamas elementas EMBED arba OBJECT ir jis negali tiesiogiai sąveikauti su kitais HTML elementais. Kadangi CANVAS elementas yra DOM dalis, jis gali įvairiais būdais sąveikauti su DOM.
- Pvz., Galite sukurti animaciją, kuri keičiasi, kai sąveikaujama su kita puslapio dalimi, pvz., Užpildomas formos elementas. Su „Flash“ daugiausiai galėtumėte pradėti Flash filmas ar animaciją, bet naudodamiesi CANVAS, galite sukurti daug įvairių efektų, netgi į animaciją įtraukti tekstą iš formos lauko.
- CANVAS elementą natūraliai palaiko žiniatinklio naršyklės. Kad vartotojai iš tikrųjų galėtų naudoti „Flash“, jų naršyklėje turi būti įdiegtas papildinys. Dažniausiai tai vargina daugumą žmonių dėl pasenusių „Flash“ diegimų arba dėl to, kad jų operacinė sistema paprasčiausiai to nepalaiko.
- Anksčiau buvo, kad kiekvienoje naršyklėje buvo įdiegtas papildinys, tačiau taip nebėra, ir daugelis dėl sunkumų netgi pašalina papildinį. Be to, jis net nėra populiarus „iOS“ platforma.
Drobė yra naudinga, net jei niekada neplanavote naudoti „Flash“
Viena iš pagrindinių priežasčių, kodėl CANVAS elementas yra toks painus, yra ta, kad daugelis dizainerių priprato prie visiškai statiško interneto. Vaizdai gali būti animuoti, bet tai daroma GIF, ir, žinoma, galite įterpti vaizdo įrašą į puslapius, bet vėlgi, tai yra statiškas vaizdo įrašas, kuris tiesiog sėdi puslapyje ir galbūt prasideda arba sustoja dėl sąveikos, tačiau viskas.
CANVAS elementas leidžia pridėti daug daugiau interaktyvumo į savo tinklalapius, nes dabar galite dinamiškai valdyti grafiką, vaizdus ir tekstą naudodami scenarijų kalbą. CANVAS elementas padeda paversti vaizdus, nuotraukas, diagramas ir diagramas animuotais elementais.
Kada verta apsvarstyti drobės elemento naudojimą
Jūsų auditorija turėtų būti jūsų pirmas dėmesys nusprendžiant, ar naudoti elementą CANVAS.
Jei jūsų auditorija pirmiausia naudoja Windows XP ir IE 6, 7 ar 8, tada sukurti dinaminę drobės funkciją bus beprasmiška, nes tos naršyklės jos nepalaiko.
Jei kuriate programą, kuri bus naudojama tik „Windows“ kompiuteriuose, „Flash“ gali būti geriausias pasirinkimas. Programai, kuri bus naudojama „Windows“ ir „Mac“ kompiuteriuose, gali būti naudinga „Silverlight“ programa.
Tačiau, jei jūsų programą reikia peržiūrėti mobiliuosiuose įrenginiuose (tiek „Android“, tiek „iOS“), taip pat ir moderniose staliniai kompiuteriai (atnaujinti į naujausias naršyklės versijas), tada naudoti elementą CANVAS yra geras pasirinkimas.
Atminkite, kad naudojant šį elementą galite turėti atsargines parinktis, pvz., Statinius vaizdus senesnėms naršyklėms, kurios jo nepalaiko.
Tačiau viskam nerekomenduojama naudoti HTML5 drobės. Tu turėtum niekada naudokite jį tokiems dalykams, kaip jūsų logotipas, antraštė ar naršymas (nors tai būtų naudinga norint animuoti dalį bet kurio iš jų, būtų gerai).
Pagal specifikaciją turėtumėte naudoti elementus, kurie labiausiai tinka tam, ką bandote sukurti. Taigi, norint naudoti antraštę ir logotipą, geriau naudoti elementą HEADER kartu su vaizdais ir tekstu, o ne elementą CANVAS.
Be to, jei kuriate tinklo puslapis ar programą, kuri skirta naudoti neinteraktyvioje laikmenoje, pavyzdžiui, spausdinant, turėtumėte žinoti, kad dinamiškai atnaujintas CANVAS elementas gali būti nespausdintas taip, kaip tikitės. Galite gauti dabartinio turinio arba atsarginio turinio spausdinimą.