Na nossa última conversa sobre HTML5 conversamos sobre as grandes possibilidades que essa versão supimpa do HTML nos traz. Nesse artigo que você está lendo finalizaremos o bate-papo com um recurso muito bacana, então se ajeite nessa cadeira e venha comigo no balão mágico, super fantástico!
O elemento Canvas API
Definição oficial::“uma tela de bitmap dependente de resolução que pode ser usada para renderizar gráficos, animações de jogos e outras imagens visuais em tempo real”.
Este elemento é um dos maiores avanços do HTML5 para desenvolver aplicações avançadas sem a utilização de plugins como Adobe Flash player, ele veio para ser o trunfo dos desenvolvedores “no que se refere” a manipulação gráfica por meio do nosso amigo Javascript.
É uma API (Application Programming Interface), uma interface entre aplicativo e programação (API) é um conjunto de instruções e padrões de programação para acesso a um aplicativo de software baseado na Web, ou ferramenta de Web. Uma empresa de software lança seu API para o público de modo a que outros criadores de software possam desenvolver produtos acionados por esse serviço.
No popular, O elemento Canvas, novidade do HTML 5, permite que a informação para a construção de imagens baseadas em pixels seja inserida diretamente no código do documento. Este elemento apenas delimita em que local da tela isto acontece. O processo de desenho é controlado por uma API específica que interage com JavaScript. Por enquanto, as imagens criadas são objetos em duas dimensões (2D), mas já existem experimentos para construção de objetos 3D com a API Canvas.
No Link abaixo você vê a coisa em ação com o exemplo no site da W3C. Depois de gerar o desenho, inspecione o elemento (Google Chrome ou Mozilla Firefox) e veja o código direto no HTML, bacana né!
https://www.w3.org/wiki/HTML/Elements/canvas
Mão na massa: Como utilizar a API Canvas
Para não ficarmos apenas nos exemplos e no bla bla!, vamos fazer uma experiência aqui e desenvolver nosso próprio desenho utilizando o recurso em questão.
Vamos iniciar escrevendo nossa tag no HTML e depois fazer a coisa toda acontecer com nosso parceiro Javascript.
Crie a tag Canvas
Primeiro abrimos uma tag Canvas, com seu respectivo ID, Também setamos nele a largura e altura.
Vamos de 300 pixels para ambas as dimensões ok?
<canvas id=”x” width=”300” height=”300”></canvas>.
O código acima cria apenas um quadrado, e que obviamente você não vai visualizá-lo pois o mesmo está sem estrutura de estilo com cores. Agora que tal adicionarmos mais algumas ações para que possamos ver a magia acontecer?
Crie o Script
Abrimos o script onde faremos o comportamento do nosso experimento.
<script>
function desenhar(){
//Com essa função trataremos a partir do ID que criamos la no inicio na tag Canvas
var desenho = document.getElementById('x');
var context = desenho.getContext('2d');
//Aqui vamos inserir as cores.
context.fillStyle = '#00FFFF'
context.fillRect(50,50,200, 200); }//Fechamos aqui o nosso script. </script>
Entenda o código
Vejamos alguns itens importantes do nosso Código.
Repare que utilizamos a propriedade fillStyle para definirmos a cor que preenche nosso retângulo, e então atribuímos à ela valores hexadecimais.
Então utilizamos o método fillRect que preenche o nosso retângulo coma as cores antes especificadas na propriedade fillStyle, em tempo essa função precisa receber valores da seguinte forma (x, y, width, height)
Existem mais outras três funções para preencher de diferentes formas o retângulo, seja de forma transparente, bordas, enfim, aqui utilizaremos ele para dar maio visibilidade.
Finalizando a ideia
Agora utilizaremos a tag <p> (Há!) para criarmos um botão e assim acionarmos o elemento ok?
<p><canvas id="figura" width="300" height="300"></canvas></p>
<p><button onClick="desenhar()">Desenhar</button></p>
O exemplo vai ser exibido como a imagem a sua esquerda e o resultado final ao clicar no botão desenhar é esse que você vê na imagem a direita. Abaixo um exemplo do nosso experimento antes e depois de clicarmos no botão.
It’s Magic!
Este é um exemplo simples para você entender este elemento fantástico que o HTML5 nos proporciona.
Vale aproveitar essa oportunidade para dizer que o HTML5 no ultimo dia 28 de Outubro de 2014 foi oficialmente recomendado pela W3C. Digo isso por que o HTML5 não foi desenvolvido pelo tradicional grupo. Ele foi desenvolvido por um grupo de “revolts” em relação ao W3C, fundado por developers oriundos da Mozilla, Apple e Opera, eles são conhecidos como WhatWG.
Conclusão
O Canvas veio para elevar o desenvolvimento de Web Components a um outro nível. A manipulação gráfica é extremamente importante para experiência do usuário.
Manipular de forma tão expressiva os elementos nas páginas web traz uma gama enorme de possibilidades e experiências tanto para quem desenvolve quanto para o usuário, e poder desenvolver isso de forma muito mais dinâmica e com um desempenho maior é extremamente importante.
Vale a reflexão e correr atrás de mais conhecimento nas magníficas oportunidades que o HTML5 vem nos proporcionando.
“Para o alto e avante!”