HTML5 inclui um elemento interessante chamado CANVAS. Ele tem muitos usos, mas para usá-lo, você precisa aprender um pouco de JavaScript, HTML, e às vezes CSS.
Isso torna o elemento CANVAS um pouco assustador para muitos designers e, de fato, a maioria provavelmente irá ignorar o elemento até que haja ferramentas confiáveis para criar animações e jogos CANVAS sem saber JavaScript.
Para que o Canvas HTML5 é usado
O elemento CANVAS do HTML5 pode ser usado para muitas coisas que antes era necessário usar um aplicativo incorporado como o Flash para gerar:
- Gráficos dinâmicos
- Jogos online e offline
- Animações
- Vídeo e áudio interativos
Na verdade, o principal motivo pelo qual as pessoas usam o elemento CANVAS é a facilidade de virar uma página da web simples em um aplicativo da web dinâmico e, em seguida, converta esse aplicativo em um aplicativo móvel para uso em smartphones e comprimidos.
Se temos Flash, por que precisamos do Canvas?
De acordo com Especificação HTML5, o elemento CANVAS é: “... uma tela de bitmap dependente da resolução, que pode ser usada para renderizar gráficos, gráficos de jogos, arte ou outras imagens visuais em tempo real”.
O elemento CANVAS permite desenhar gráficos, gráficos, jogos, arte e outros recursos visuais diretamente na página da web em tempo real.
Você pode estar pensando que já podemos fazer isso com o Flash, mas existem duas diferenças principais entre CANVAS e Flash:
- O elemento CANVAS está embutido diretamente no HTML. Os scripts que se baseiam nele estão no HTML ou em um arquivo externo vinculado. Isso significa que o elemento CANVAS é uma parte do modelo de objeto de documento (DOM).
- Flash é um arquivo externo incorporado. Ele usa o elemento EMBED ou o elemento OBJECT para exibir e não pode interagir diretamente com os outros elementos HTML. Como o elemento CANVAS faz parte do DOM, ele pode interagir com o DOM de várias maneiras.
- Por exemplo, você pode criar uma animação que muda quando alguma outra parte da página tem interação - como um elemento de formulário sendo preenchido. Com o Flash, o máximo que você poderia fazer seria iniciar o Filme em flash ou animação, mas com CANVAS, você pode criar muitos efeitos diferentes, até mesmo adicionando o texto do campo do formulário na animação.
- O elemento CANVAS é nativamente suportado por navegadores da web. Para que os usuários realmente usem o Flash, o navegador deve ter o plug-in instalado. Isso costuma ser um incômodo para a maioria das pessoas devido a instalações desatualizadas do Flash ou ao fato de que seu sistema operacional simplesmente não oferece suporte para isso.
- Antigamente todos os navegadores tinham o plugin instalado, mas não é mais o caso, e muitos até estão removendo o plugin por dificuldades. Além disso, nem mesmo está disponível no popular plataforma iOS.
A tela é útil mesmo se você nunca planejou usar o Flash
Uma das principais razões pelas quais o elemento CANVAS é tão confuso é que muitos designers se acostumaram a uma web completamente estática. As imagens podem ser animadas, mas isso é feito com GIFe, claro, você pode incorporar vídeo em páginas, mas, novamente, é um vídeo estático que simplesmente fica na página e talvez comece ou pare devido à interação, mas isso é tudo.
O elemento CANVAS permite adicionar muito mais interatividade às suas páginas da web porque agora você pode controlar os gráficos, imagens e texto dinamicamente com uma linguagem de script. O elemento CANVAS ajuda a transformar imagens, fotos, tabelas e gráficos em elementos animados.
Quando considerar o uso do elemento Canvas
Seu público deve ser sua primeira consideração ao decidir se deve usar o elemento CANVAS.
Se o seu público usa principalmente Windows XP e no IE 6, 7 ou 8, criar um recurso de tela dinâmica será inútil, pois esses navegadores não o suportam.
Se você estiver criando um aplicativo que será usado apenas em máquinas Windows, o Flash pode ser sua melhor aposta. Um aplicativo para ser usado em computadores Windows e Mac pode se beneficiar de um aplicativo Silverlight.
No entanto, se seu aplicativo precisa ser visualizado em dispositivos móveis (Android e iOS), bem como em dispositivos modernos computadores desktop (atualizados para as versões mais recentes do navegador), então usar o elemento CANVAS é uma boa escolha.
Lembre-se de que usar esse elemento permite que você tenha opções de fallback, como imagens estáticas para navegadores mais antigos que não o suportam.
No entanto, não é recomendado usar a tela HTML5 para tudo. Você deve Nunca use-o para coisas como seu logotipo, título ou navegação (embora usá-lo para animar uma parte de qualquer um deles seja adequado).
De acordo com a especificação, você deve usar os elementos mais adequados para o que está tentando construir. Portanto, usar o elemento HEADER junto com imagens e texto é preferível ao elemento CANVAS para seu cabeçalho e logotipo.
Além disso, se você estiver criando um página da Internet ou aplicativo que se destina a ser usado em uma mídia não interativa como impressão, você deve estar ciente de que o elemento CANVAS que foi atualizado dinamicamente pode não ser impresso como você espera. Você pode obter uma impressão do conteúdo atual ou do conteúdo substituto.