Html5 canvas,

Disponível somente no TrabalhosFeitos
  • Páginas : 4 (903 palavras )
  • Download(s) : 0
  • Publicado : 14 de abril de 2013
Ler documento completo
Amostra do texto
O que é HTML5?
Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas que deveria seguir. Formatação,separação de código, acessibilidade eram algumas dessas boas práticas.
Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS.
O HTML5,logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elementopossibilitando ao desenvolvedor modificar as características do objeto de forma não intrusiva.
Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>,<audio> e <canvas>.
Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag .

A tag canvas
A canvas nada mais é do que um espaço ondepodemos desenhar elementos específicos, formas geométricas e imagens, por exemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag .
Por Javascript podemos acessar métodos dacanvas que desenham formas, linhas, caracteres e adicionar imagens.
Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma pode conter uma maso contrário não é verdade.
Vale resaltar que versões antigas de navegadores podem ser incompatíveis, as versões do Internet Explorer anterior ao 9, por exemplo.
Criar uma canvas não difere do quejá conhecemos de outras tags HTML. Vejamos:

Listagem 1: Criando uma canvas
12345678 | <!DOCTYPE html><html><body><canvas id="idCanvas" width="200" height="100"style="border:1px solid #c3c3c3;">Se seu navegador não suportar HTML5 você verá esta mensagem.</canvas></body></html> |
Na Listagem 1 criamos uma canvas com largura 200px e altura 100px e...
tracking img