HTML5 include un element interesant numit CANVAS. Are o mulțime de utilizări, dar pentru a-l utiliza, trebuie să învățați ceva JavaScript, HTML, si cateodata CSS.
Acest lucru face ca elementul CANVAS să fie un pic descurajator pentru mulți designeri și, de fapt, majoritatea vor ignora probabil elementul până când există instrumente fiabile pentru a crea animații și jocuri CANVAS fără să știe JavaScript.
La ce folosește pânza HTML5
Elementul HTML5 CANVAS poate fi folosit pentru o mulțime de lucruri pe care anterior, trebuia să le folosiți o aplicație încorporată precum Flash pentru a genera:
- Grafică dinamică
- Jocuri online și offline
- Animații
- Video și audio interactive
De fapt, principalul motiv pentru care oamenii folosesc elementul CANVAS se datorează cât de ușor este să transformați o pagină web simplă într-o aplicație web dinamică și apoi convertiți acea aplicație într-o aplicație mobilă pentru utilizare pe smartphone-uri și comprimate.
Dacă avem Flash, de ce avem nevoie de pânză?
In conformitate cu
Specificație HTML5, elementul CANVAS este: „... o pânză bitmap dependentă de rezoluție, care poate fi utilizată pentru redarea de grafice, grafică de joc, artă sau alte imagini vizuale din mers.”Elementul CANVAS vă permite să desenați grafice, grafică, jocuri, artă și alte elemente vizuale chiar pe pagina web în timp real.
S-ar putea să vă gândiți că putem face asta deja cu Flash, dar există două diferențe majore între CANVAS și Flash:
- Elementul CANVAS este încorporat chiar în HTML. Scripturile care desenează pe acesta se află fie în HTML, fie într-un fișier extern legat. Aceasta înseamnă că elementul CANVAS face parte din modelul de obiect document (DOM).
- Flash este un fișier extern încorporat. Utilizează fie elementul EMBED, fie elementul OBJECT pentru a afișa și nu poate interacționa direct cu celelalte elemente HTML. Deoarece elementul CANVAS face parte din DOM, poate interacționa cu DOM în multe feluri.
- De exemplu, ați putea crea o animație care se schimbă atunci când este interacționată o altă parte a paginii - cum ar fi completarea unui element de formular. Cu Flash, cel mai mult ați putea face este să porniți Film flash sau animație, dar cu CANVAS, puteți crea multe efecte diferite, chiar adăugând textul din câmpul formularului în animație.
- Elementul CANVAS este suportat în mod nativ de browserele web. Pentru ca utilizatorii să folosească Flash, browserul trebuie să aibă pluginul instalat. Acest lucru este adesea o problemă pentru majoritatea oamenilor din cauza instalărilor Flash învechite sau a faptului că sistemul lor de operare pur și simplu nu îl acceptă.
- Înainte, fiecare browser avea pluginul instalat, dar nu mai este cazul și mulți chiar elimină pluginul din cauza dificultăților. În plus, nici măcar nu este disponibil pe popular Platforma iOS.
Pânza este utilă chiar dacă nu ați planificat niciodată să utilizați blițul
Unul dintre principalele motive pentru care elementul CANVAS este atât de confuz este că mulți designeri s-au obișnuit cu un web complet static. Imaginile ar putea fi animate, dar asta se face cu GIFși, desigur, puteți încorpora videoclipuri în pagini, dar din nou, este un videoclip static care pur și simplu stă pe pagină și poate începe sau se oprește din cauza interacțiunii, dar asta este tot.
Elementul CANVAS vă permite să adăugați mult mai multă interactivitate paginilor dvs. web, deoarece acum puteți controla dinamic grafica, imaginile și textul cu un limbaj de scriptare. Elementul CANVAS vă ajută să transformați imagini, fotografii, diagrame și grafice în elemente animate.
Când să luați în considerare utilizarea elementului Canvas
Publicul dvs. ar trebui să fie prima dvs. considerație atunci când decideți dacă utilizați elementul CANVAS.
Dacă publicul dvs. folosește în principal Windows XP și IE 6, 7 sau 8, atunci crearea unei caracteristici din pânză dinamică va fi inutilă, deoarece aceste browsere nu o acceptă.
Dacă creați o aplicație care va fi utilizată numai pe mașinile Windows, atunci Flash ar putea fi cel mai bun pariu. O aplicație care va fi utilizată pe computerele Windows și Mac ar putea beneficia de o aplicație Silverlight.
Cu toate acestea, dacă aplicația dvs. trebuie să fie vizualizată pe dispozitive mobile (atât Android și iOS), cât și moderne computerele desktop (actualizate la cele mai recente versiuni de browser), apoi utilizarea elementului CANVAS este o alegere bună.
Rețineți că utilizarea acestui element vă permite să aveți opțiuni alternative, cum ar fi imagini statice pentru browsere mai vechi care nu o acceptă.
Cu toate acestea, nu se recomandă utilizarea pânzei HTML5 pentru toate. Tu ar trebui nu folosiți-l pentru lucruri precum sigla, titlul sau navigarea dvs. (deși ar fi bine să îl folosiți pentru a anima o porțiune din acestea).
Conform specificațiilor, ar trebui să utilizați elementele care sunt cele mai potrivite pentru ceea ce încercați să construiți. Așadar, utilizarea elementului HEADER împreună cu imagini și text este preferabilă elementului CANVAS pentru antetul și sigla dvs.
De asemenea, dacă creați un fișier pagină web sau aplicație care este destinată a fi utilizată într-un mediu non-interactiv, cum ar fi tipărirea, trebuie să știți că elementul CANVAS care a fost actualizat dinamic poate să nu imprime așa cum vă așteptați. Este posibil să obțineți o imprimare a conținutului curent sau a conținutului alternativ.