Guia do elemento Canvas do HTML5 para desenvolvedores

Link para discução: http://lliure.com.br/hub/apm=comunidade/sapm=comunidade/sapm=forum/cmd=1000000069/topico=212
Eduardo - 07/10/2015

Sem dúvida, o elemento canvas do HTML5 é o recurso que a maioria dos desenvolvedores vai querer usar para desenvolver aplicações web verdadeiramente avançadas – sem precisar instalar plug-ins de navegador como o Adobe Flash Player. Clientes avançados são a prioridade dos desenvolvedores no momento, e a criação do canvas está relacionada a essa tendência. Todos os navegadores modernos, como o Chrome, o Firefox e o Internet Explorer 9 e 10, têm suporte para ele. Mas o que é exatamente o elemento canvas do HTML5? Como você pode usá-lo para criar aplicações web avançadas?

Para que serve o elemento canvas? Oficialmente, o canvas é “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”. Em termos leigos, o canvas é um novo elemento do HTML5 que permite desenhar gráficos usando o JavaScript. Pode ser usado para renderizar textos, imagens, gráficos, retângulos, linhas, gradientes e outros efeitos de forma dinâmica. O desenho é feito através da API 2D do canvas. Essa API contém inúmeras funções que permitem desenhar praticamente qualquer coisa na tela. Atualmente, o canvas tem suporte para superfícies 2D, não 3D. Como é o canvas? Nada de mais. Veja você mesmo.

<canvas id=”lliure” style=”width:300px; height:300px”>

O código acima renderiza um canvas no navegador, mas como ele está vazio, você não vai ver nada.

Uma página web pode ter vários elementos canvas. Se tiverem IDs individuais, você pode direcionar o desenho a um canvas específico através do JavaScript. Para desenhar, você precisa fazer referência ao contexto do canvas. O contexto dá acesso aos métodos e propriedades 2D que permitem desenhar e manipular imagens em um elemento canvas. Vamos falar sobre isso mais adiante. Todo elemento canvas tem coordenadas x e y; \"x\" é a coordenada horizontal e \"y\" é a vertical.

Esclarecendo a relação SVG - Canvas É importante entender as diferenças entre os elementos canvas e SVG. SVG é um formato de gráficos de vetor baseado em XML. Você pode adicionar estilos a ele com CSS e comportamentos dinâmicos através do SVG DOM. Com o canvas, é possível desenhar gráficos e formas através do JavaScript. Ele também possibilita a adição de estilos e comportamentos dinâmicos. Veja por que é melhor usar o canvas em vez do SVG.

  • O canvas é mais rápido no desenho de gráficos complexos
  • Você pode salvar imagens fora do canvas, o que não é possível no SVG
  • Tudo no canvas é um pixel.

Por outro lado, o SVG também tem algumas vantagens.

  • É independente de resolução, portanto pode escalar conforme a resolução da tela
  • É xml, por isso é fácil visar vários elementos
  • É bom em animações complexas

Então qual escolher? Se seu site é dependente de resolução, altamente interativo e você quer edição de imagens de vetor, escolha o SVG. Mas se você estiver desenvolvendo um jogo e quiser renderizar gráficos bem mais rápido, ou não quiser mexer com XML, escolha o canvas. Em um mundo ideal, eles funcionariam juntos e se complementariam.

Canvas e aceleração de hardware Usar o canvas é a melhor forma de aprender sobre a aceleração de hardware na web. Nas versões anteriores dos navegadores, a renderização de gráficos – como a maioria das tarefas que faziam uso intenso de computação – era realizada pela CPU, a unidade de processamento central. Os navegadores modernos têm inovado nessa área usando a GPU (graphics processing unit - unidade de processamento de gráficos) para renderizar gráficos e textos em páginas web por meio do Direct2D e do DirectWrite. A alocação dessas tarefas nos núcleos da GPU não só acelera o processamento dos gráficos como diminui a carga da CPU, que pode cuidar das tarefas seriais com mais eficiência.

O JavaScript também já foi acusado de monopolizar o processamento. Um bom exemplo de como lidar com isso é o mecanismo de JavaScript do IE9, Chakra, que usa núcleos multiprocessador para compilar o JavaScript em segundo plano e convertê-lo em código de máquina, acelerando o processamento.

Em ambos os casos, o resultado final é a aceleração do desempenho.

Menciono isso aqui porque, acelerando o processamento de gráficos e o processamento de JavaScript, criamos um ambiente ideal para aproveitar ao máximo o canvas do HTML5.

Quando enviamos comandos de desenho ao canvas, o navegador os envia diretamente ao hardware de gráficos sem que tenhamos que desenvolver mais nada. O hardware funciona incrivelmente rápido para fornecer animações e gráficos interativos em tempo real, sem tornar lenta a experiência de usuário que você está proporcionando.

API 2D do canvas

A API 2D é um objeto que permite desenhar e manipular imagens e gráficos em um elemento canvas. Para fazer referência ao contexto do canvas, chamamos o getContext, que é um método do elemento canvas. Ele tem um único parâmetro, que atualmente é o 2d. Este é o trecho de código para fazer referência ao contexto.

var myCanvas = document.getElementById(“myCanvas”); var context = myCanvas.getContext(“2d”);

Cada canvas tem seu próprio contexto, portanto se sua página tiver vários elementos canvas, faça uma referência individual a cada contexto com o qual quiser trabalhar.

Além do getContext, há várias outras funções à sua disposição na API 2D do canvas. Algumas das mais importantes estão descritas abaixo.

Funções de transformação

scale – para escalonar o contexto atual. rotate – para girar as coordenadas x e y do contexto atual. Funções de estado

save – para salvar o estado atual do contexto. restore – para restaurar o contexto a um estado salvo anteriormente. Funções de texto

font – obtém ou define a fonte do contexto atual. fillText – renderiza o texto preenchido no canvas atual. measureText – mede a largura atual do texto especificado. Como você deve imaginar, há mais métodos anexados à API 2D do canvas. Visite esta página para conhecer os métodos não mencionados nesta seção.

O canvas é bastante tedioso se não desenharmos nele, por isso vamos ver o que pode ser desenhado quando temos o contexto.

Formas e cores Existe um grupo grande de propriedades e funções voltadas ao desenho de formas. Vamos começar com os retângulos. Estas são as funções disponíveis para desenhar retângulos.

fillRect(x, y, w, h) – desenha o retângulo na tela usando o estilo de preenchimento atual strokeRect(x, y, w, h) – desenha a caixa que contorna o retângulo usando o estilo de traço atual clearRect(x, y, w, h) – limpa todos os pixels dentro do retângulo deixando-o preto A forma mais fácil de desenhar um retângulo é com o fillRect. Ele desenha o retângulo na tela usando o estilo de preenchimento (fillStyle) atual. Veja como criar um retângulo preto.

textpop-up var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“2d”); context.fillRect(5, 5, 145, 145);

Se você não especificar a cor, o padrão será sempre preto. Para desenhar outro retângulo em cima, chame o fillRect novamente com parâmetros diferentes. O fillStyle pode ser de qualquer cor do CSS, portanto podemos usar a nova propriedade deopacidade do CSS3. O código a seguir desenha três retângulos na tela e muda a cor do de baixo para que fique semitransparente.

context.fillRect(5, 5, 145, 145); context.fillStyle = “rgb(0, 162, 232)”; context.fillRect(40, 55, 145, 145); context.fillStyle = “rgba(255, 0, 0, 0.2)”; context.fillRect(75, 105, 145, 145);

Desenhar círculos também é simples. A forma mais fácil é com o arc. Ele desenha um círculo na tela usando o fillStyle atual. A definição da função está abaixo.

arc(x, y, radius, startAngle, endAngle, anticlockwise) –aponta para o subcaminho para que o arco descrito pela circunferência do círculo descrito pelos argumentos, começando no ângulo inicial dado e terminando no ângulo final dado, indo na direção dada, seja adicionado ao caminho Veja como criar um círculo preto.

textpop-up context.beginPath(); context.fillStyle = “rgb(0, 0, 0)”; context.arc(123, 93, 70, 0, 2 * Math.PI, true); context.fill();

Para desenhar o contorno do círculo, use o strokeStyle em vez do fillStyle. Depois chame o stroke em vez do fill.

context.beginPath(); context.strokeStyle = “rgb(0, 0, 0)”; context.arc(123, 93, 70, 0, 2 * Math.PI, true); context.stroke(); Os círculos não precisam ter 360 graus. Para alterar o formato, mude o raio inicial e final.

textpop-up context.beginPath(); context.strokeStyle = “rgb(0, 0, 0)”; context.arc(123, 93, 70, 0, 0.5 * Math.PI, true); context.stroke();

Graças ao JavaScript, posso estender o elemento canvas e adicionar manipuladores de eventos personalizados para manipular o movimento do mouse. Veja a versão \"dinâmica\" aqui. Vá em frente, rabisque alguma coisa.

Nossa jornada foi rápida, mas espero que você esteja ansioso para usar o elemento canvas, agora que sabe que esses efeitos extraordinários estão disponíveis nos navegadores modernos.

Jeison - 08/10/2015

Muito bacana seu post Eduardo

Quase todos direitos reservados a Newsmade
Newsmade