Html5 canvas,
903 palavras
4 páginas
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 elemento possibilitando 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 onde podemos 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 da canvas 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 mas o 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 que já 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