Aquest element té avantatges sobre altres tecnologies
HTML5 inclou un element emocionant anomenat CANVAS. Té molts usos, però per utilitzar-lo cal que aprengui JavaScript, HTML i, de vegades, CSS.
Això fa que l'element CANVAS sigui una mica desalentador per a molts dissenyadors, i de fet, la majoria ignorarà l'element fins que hi hagi eines fiables per crear animacions i jocs CANVAS sense saber JavaScript.
El que s'utilitza HTML5 Canvas
L'element HTML5 CANVAS es pot utilitzar per a moltes coses que anteriorment, havíeu d'utilitzar una aplicació incrustat com Flash per generar:
- gràfics dinàmics
- jocs en línia i fora de línia
- animacions
- vídeo interactiu i àudio
De fet, la raó principal de les persones que utilitzen l'element CANVAS és degut al fàcil que és convertir una pàgina web senzilla en una aplicació web dinàmica i convertir-la en una aplicació mòbil per a ús en telèfons intel·ligents i tauletes.
Si tenim Flash, per què necessitem llenç?
Segons l'especificació HTML5, l'element CANVAS és:
"... un llenç de mapes de bits dependent de la resolució, que es pot utilitzar per representar gràfics, gràfics de joc, art o altres imatges visuals sobre la marxa".L'element CANVAS us permet dibuixar gràfics, gràfics, jocs, art i altres visuals directament a la pàgina web en temps real.
Podria pensar que ja podem fer això amb Flash, però hi ha dues grans diferències entre CANVAS i Flash:
- L'element CANVAS està incrustat directament a l'HTML. Les seqüències d'ordres que s'hi basen es troben en HTML o en un fitxer extern enllaçat. Això significa que l'element CANVAS forma part del model d'objectes de documents o DOM.
- Flash és un fitxer extern incrustat. Utilitza l'element EMBED o OBJECT per mostrar i no pot interactuar directament amb els altres elements HTML. Atès que l'element CANVAS forma part del DOM, pot interactuar amb el DOM de moltes maneres.
- Per exemple, podeu crear una animació que canvia quan s'interacciona una altra part de la pàgina, com ara un element de formulari que s'inclourà. Amb Flash, el màxim que podeu fer és iniciar la pel·lícula o animació en Flash, però amb CANVAS podeu crear molts efectes diferents, fins i tot afegint el text del camp del formulari a l'animació.
- L'element CANVAS és compatible amb navegadors web de forma nativa. Perquè els usuaris facin servir Flash, el seu navegador ha de tenir instal·lat el connector. Això sovint és una molèstia per a la majoria de les persones a causa de les instal·lacions de Flash antigues o el fet que el seu sistema operatiu simplement no ho admeti.
- Solia ser que cada navegador tenia instal·lat el connector, però això ja no és el cas, i molts encara estan eliminant el connector a causa de dificultats. A més, ni tan sols està disponible a la popular plataforma iOS.
La lona és útil, fins i tot si mai no vau planificar utilitzar Flash
Una de les raons principals per les quals l'element CANVAS és tan confús és que molts dissenyadors s'han utilitzat en una web completament estàtica. Les imatges poden estar animades, però això es fa amb GIF i, per descomptat, podeu integrar el vídeo a pàgines però, de nou, és un vídeo estàtic que simplement es troba a la pàgina i potser comença o s'atura causa de la interacció, però això és tot.
L'element CANVAS us permet afegir molta més interactivitat a les vostres pàgines web, ja que ara podeu controlar els gràfics, les imatges i el text dinàmicament amb un llenguatge de scripting. L'element CANVAS us ajuda a convertir imatges, fotos, gràfics i gràfics en elements animats.
Quan cal considerar utilitzar l'element Canvas
El vostre públic ha de ser la primera consideració al decidir si voleu utilitzar l'element CANVAS.
Si la vostra audiència utilitza principalment Windows XP i IE 6, 7 o 8, a continuació, crear una característica de llenç dinàmic serà inútil ja que aquests navegadors no ho admeten.
Si esteu construint una aplicació que només s'utilitzarà en màquines Windows, Flash pot ser la vostra millor aposta. Una aplicació que s'utilitzarà en equips Windows i Mac podria beneficiar-se d'una aplicació Silverlight.
Tanmateix, si la vostra aplicació s'ha de veure en dispositius mòbils (tant Android com iOS), així com ordinadors d'escriptori moderns (actualitzats a les últimes versions del navegador), utilitzar l'element CANVAS és una bona opció.
Tingueu en compte que l'ús d'aquest element us permet tenir opcions de recuperació com ara imatges estàtiques per navegadors antics que no ho admeten.
No obstant això, no es recomana utilitzar làmines HTML5 per a tot. Mai no haureu d' utilitzar-lo per a coses com el vostre logotip, títol o navegació (encara que fer-lo servir per animar una part d'alguna d'elles estaria bé).
Segons l'especificació, hauríeu d'utilitzar els elements més adequats per al que esteu intentant generar. Per tant, és preferible utilitzar l'element HEADER juntament amb imatges i text per a l'element CANVAS per al vostre encapçalament i el logotip.
A més, si esteu creant una pàgina web o una aplicació que es pretengui utilitzar en un medi no interactiu, com ara la impressió, haureu de tenir en compte que l'element CANVAS que s'ha actualitzat dinàmicament no es pot imprimir segons s'espera. Podeu obtenir una impressió del contingut actual o del contingut de reserva.