Há alguns meses demos início ao desafio de escrever uma série sobre HTML 5. Com a implementação dos principais recursos da nova especificação por parte dos principais browsers do mercado, uma série didática de artigos que apresentasse os principais recursos da nova linguagem de marcação em português do Brasil poderia ser algo de grande valor para desenvolvedores web interessados em construir suas aplicações utilizando boas práticas, webstandards, etc.
Para facilitar o acompanhamento, todos os artigos da série foram agrupados em uma página deste site e você pode efetuar a leitura dos mesmos clicando aqui.
Nesta série apresentamos alguma justificativa para que a W3C iniciasse o processo de escrita de uma nova especificação a linguagem HTML, uma vez que o cenário web experimentou transformações importantes. Falamos também sobre as tags <video> e <audio> e hoje, falaremos de um dos novos recursos que é responsável por grande parte das dúvidas daqueles que entram em contato com HTML 5 pela primeira vez. Falaremos da tag <canvas>.
O que é canvas?
Podemos simplificar a descrição de canvas da seguinte forma: “região da página web que permite a construção de desenhos em tempo de execução com HTML e Javascript”. Sim, a ideia aqui é que sua página web possa ser capaz reproduzir objetos gráficos de forma embutida sem necessariamente utilizar uma imagem em formato gif, jpeg, png, etc. para apresentar elementos gráficos.
Na página HTML, canvas é uma região retangular onde cada píxel deve ser controlado pelo script desenvolvido por você. A Figura 1 ilustra o recurso em execução. É um desenho básico (2D), cuja execução pode ser visualizada clicando aqui.
Figura 1. Exemplo de canvas em execução
A Listagem 1 descreve apresenta o código que realiza o desenho apresentado pela Figura 1.
[html] <canvas style=”border-bottom: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid” id=”PrimeiroExemplo” height=”200″ width=”300″>Seu browser não suporta canvas </canvas><script type=”text/javascript”>
var ObjetoCanvas = document.getElementById(“PrimeiroExemplo”);
var ObjetoCanvasDesenho = ObjetoCanvas.getContext(“2d”);
ObjetoCanvasDesenho.beginPath();
ObjetoCanvasDesenho.moveTo(50,50);
ObjetoCanvasDesenho.lineTo(50,100);
ObjetoCanvasDesenho.moveTo(25,50);
ObjetoCanvasDesenho.lineTo(100,50);
ObjetoCanvasDesenho.moveTo(50,100);
ObjetoCanvasDesenho.lineTo(200,100);
ObjetoCanvasDesenho.stroke();
</script>[/html]
Listagem 1. Trecho HTML 5 que desenha o objeto apresentado pela Figura 1
A Listagem 1 apresenta aspectos fundamentais para o entendimento do recurso objeto de estudo neste artigo, a tag canvas. A seguir apresento em maiores detalhes cada um deles.
-
Linha 1: declaração da tag canvas. O processo de declaração é simples e, se você trabalha com desenvolvimento web é extremamente familiar. Com a tag canvas informamos ao browser que naquele ponto uma area de canvas deve ser adicionada. Como tudo em HTML, anexo a tag canvas temos os parâmetros de tamanho (largura e altura, “width” e “height” respectivamente) e estilo CSS inline através do atributo style. Ainda na linha 1, conforme mencionado anteriormente, para que possamos desenhar na área canvas, precisamos recorrer a linguagem Javascript (sempre ela não?!). Assim, criamos uma área para realizar a codificação do desenho
-
Linha 2: para que possamos manipular a área canvas, fazemos ao elemento DOM através do atributo “id“. Em nosso caso, a area de canvas foi nomeada como “PrimeiroExemplo”. Assim, o que estamos fazendo na linha 2 é criar o objeto DOM dentro do Javascript na variável dinâmica “ObjetoCanvas” para que, posteriormente, possamos realizar a manipulação.
-
Linha 3: a linha 3 cria uma nova variável dinâmica que possui uma especificação do objeto DOM criado na linha anterior. Aqui, estamos criando um objeto canvas com base no contexto de desenho (em nosso caso “2d”).
-
Linha 4: informamos ao browser que queremos criar um novo desenho ou limpar a área através do método “beginPath()“.
-
Linha 5: utilizamos o método “moveTo()“. Como o próprio nome sugere, este método tem o objetivo de mudar o eixo de inicialização do desenho a ser criado. O ponto (0,0) da área de canvas por padrão é: topo à esquerda. Assim, fazendo “moveTo(50,50)” estamos mudando o eixo de inicialização 50 pixels a direita e 50 pixels abaixo.
-
Linha 6: como você já deve estar imaginando, o método “lineTo()” tem o objetivo de desenhar linhas. Os parâmetros aceitos são dois inteiros (equivalentes as coordenadas x e y). Assim, a exemplo de “moveTo()” o primeiro parâmetro x movimenta a linha para a direita, enquanto que o segundo, y movimenta a linha o eixo de altura. Com esta informação, não é difícil concluir que, ao escrevermos “lineTo(50,100)” estamos desenhando uma linha começa 50 px após o eixo padrão e se extende 100 px abaixo do início.
-
Linha 12: cria o objeto visual no ambiente especificado.
Principais recursos para construção de objetos canvas
Todos os métodos e atributos descritos a seguir são referentes aos objetos canvas para o contexto 2D. Os métodos são diversos e permitem realizar praticamente todas as operações possíveis com 2-dimensões.
1. Trabalhando com cores e estilos
-
fillStyle: atributo que permite definir a cor de determinado objeto. A cor pode ser definida em valor hexadecimal. Caso nenhuma cor seja informada, por padrão, preto será aplicada.
-
strokeStyle: define a cor das linhas de um desenho. Preto é a cor padrão para este método e os valores podem ser especificados em hxadecimal.
-
lineWidth: define a espessura de uma linha. O valor padrão é 1.
-
lineCap: define o estilo da terminação da linha. Valores aceitos: butt, square e round. O valor padrão para esta propriedade é butt.
- lineJoin: estilo das linhas ao cruazem com outras linhas. Os valores são: bevel, round e miter. O valor padrão para este caso é miter.
- miterLimit: o limite máximo em termos de tamanho para os cantos formados pela junção das linhas. O valor padrão é 10.
- shadowColor: propriedade que permite definir a cor do efeito sombra. O valor padrão é preto.
- shadowOffsetX: permite especificar a distância horizontal do objeto sombreado. O valor padrão é 0.
- shadowOffsetY: permite especificar a distância vertical do objeto sombreado. O valor padrão é 0.
- shadowBlur: permite definidir o nível de efeito blur na sombra de determinado objeto. O valor padrão é 0.
- createPattern(obj,pattern): este método tem a responsabilidade de criar um padrão de preenchimento com base em uma imagem para utilização com “fillStyle” e/ou “strokeStyle”.
- createLinearGradient(x0,y0,x1,y1): cria um círculo com preenchimento gradiente. O retorno pode ser utilizado com “fillStyle” e/ou “strokeStyle”.
- createRadialGradiente(x0,y0,r0,x1,y1,r1): funcionamento semelhante ao método “createLinearGradient()”, entretanto, cria um gradiente em formato radial.
2. Trabalhando com linhas, círculos e retângulos
- fillRect(x,y,w,h): permite desenhar um retângulo de dimensões “w” e “h”.
- strokeRect(x,y,w,h): permite desenhar as linhas de um retângulo com dimensões “w” e “h”.
- clearRect(x,y,w,h): como o próprio nome sugere, permite “limpar” a área de um retângulo. Todos os pixels colorados serão apagados.
- beginPath(): inicia uma nova linha ou limpa uma linha já existente.
- moveTo(x,y): faz o transbordo do ponto (0,0) para as dimensões “x” e “y”.
- closePath(): cria uma linha do último ponto de uma reta até o primeiro ponto de outra. Fecha um objeto com outra linha.
- lineTo(x,y): permite desenhar uma linha com comprimento “x” e altura “y”.
- rect(x,y,w,h): desenha um retângulo sem qualquer parametrização possível.
- fill(): colore uma linha com base na cor selecionada. O padrão é preto.
- clip(): cria uma sub area de canvas. Esta sub area é a única visível dentro da area geral de canvas.
- quadraticCurveTo(cpx,cpy,x,y): cria uma curva quadrática Bwzier em uma linha préviamente existente.
- bezierCurveTo(cpx,cpy,cpx,cpy,x,y): cria uma curva cúbica Bwzier em uma linha peeviamente existente.
3. Trabalhando com transformações
- scale(x,y): dimensiona os desenhos com base nas coordenadas “x” e “y”.
- rotate(angulo): método que tem o poder de rotacionar elementos dentro da area de canvas.
- translate(x,y): método que realiza a translação de objetos canvas.
- transform(a,b,c,d,e,f): modifica a forma do desenho com base em valores númericos de uma matriz.
- setTransform(a,b,c,d,e,f): remove o efeito de tranformação já aplicado e aplica novamente com os novos parâmetros.
4. Trabalhando com textos
- font: permite especificar propriedades de fontes dentro da area de canvas.
- textAlign: permite especificar a informação de alinhamento para o texto dentro da area de canvas. O valor padrão é “start”.
- textBaseline: permite alinhar o texto verticalmente dentro da area de canvas.
5. Trabalhando com imagens
- drawImage(): utiliza uma imagem para realizar um desenho dentro da area de canvas.
- createImageData(): cria uma imagem em branco. Pode parecer besteira, mas este faz toda diferença em aplicações mais elaboradas.
- getImageData(): obtém um objeto do tipo imagem dentro da area de canvas.
Considerações adicionais…
Existem alguns outros aspectos a serem considerados em relação a implementação do recurso de canvas, entretanto, os principais estão relacionados e descritos acima.
Você pode consultar a especificação oficial da W3C para obter maiores detalhes. A especificação pode ser encontrada aqui.
Por hoje é só. Forte abraço e até o próximo!
Facebook
Twitter
Instagram
LinkedIn
RSS