Como já se explicou anteriormente, canvas é um elemento sobre o qual desenhamos por meio de sentenças na linguagem de programação Javascript. Entretanto, no momento nem todos os navegadores são compatíveis com este novo componente, por isso teremos que fazer comprovações para não executar nos navegadores nenhuma instrução que possa dar erros por problemas de compatibilidade. Isto também foi explicado no artigo Exemplo de desenho com o API de canvas e ademais foi aprofundado um pouco mais no artigo anterior a este, cuja leitura também recomendamos, Entender a tela de canvas.
Neste artigo vamos explicar como podemos utilizar as funções fillRect() e strokeRect() para desenhar retângulos na página e ademais vamos implementar uma pequena interação por meio de um link, que ao clicá-lo executará uma função Javascript para excluir o conteúdo do canvas com a função clearRect().
fillRect(x,y,largura,altura)
Isto desenha um retângulo cuja esquina superior esquerda está no ponto (x,y) e cujas dimensões são altura x largura.
A cor de preenchimento não a especificamos na própria função, será a cor que tiver configurado nesse momento como cor de preenchimento, que se indica com a propriedade fillStyle do contexto do canvas, atribuindo por exemplo o RGB de uma cor.
Por exemplo, vejamos o seguinte código:
for (i=0;i<=100;i+=10){
contexto.fillRect(i,i,5,5);
}
Isto desenharia uma série de retângulos, começando na posição (0,0) e continuando com posições sempre de 10 pixels de distância em ambas coordenadas: (10,10), (20,20) ... Acabando na coordenada (100,100). Todos os retângulos serão de 5 pixels de altura e largura, logo realmente são quadrados.
strokeRect(x,y,largura,altura)
Desenha a borda de um retângulo começando na posição (x,y) para sua esquina superior esquerda e com as dimensões de altura x largura.
for (i=100;i>=0;i-=10){
contexto.strokeRect(i,100-i,5,5);
}
Com o código anterior também desenhamos uma série de quadrados no canvas, embora nesta ocasião só a silhueta sem estar preenchidas de cor, de 5 pixels de largura e altura e com distintas coordenadas que produzimos ao fazer o loop for.
De maneira similar, para definir a cor da borda do retângulo, utilizamos a propriedade strokeStyle do objeto do contexto do canvas, ao que podemos atribuir o valor RGB que desejarmos para a borda dos quadrados ou aquele que formos desenhar no canvas.
clearRect(x,y,largura,altura)
A cor aqui não importa muito, porque é simplesmente a cor do fundo do contêiner HTML onde tivermos colocado o canvas.
<html>
<head>
<title>Canvas retângulos</title>
<script>
//Recebe um identificador do elemento canvas e carrega o canvas
//Devolve o contexto do canvas ou FALSE se não pode conseguir
function carregaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recebemos o elemento canvas
var contexto = carregaContextoCanvas('meucanvas');
if(contexto){
//Se tenho o contexto
//mudo a cor de preenchimento dos retângulos
contexto.fillStyle = '#cc0000';
for (i=0;i<=100;i+=10){
// fillRect(x,y,width,height) desenha um retângulo preenchimento de cor
contexto.fillRect(i,i,5,5);
}
//mudo a cor da linha de borda do retângulo
contexto.strokeStyle = '#ff9933';
for (i=100;i>=0;i-=10){
//strokeRect(x,y,width,height) desenha a borda de um retângulo
contexto.strokeRect(i,100-i,5,5);
}
}
}
function excluir_parcial(){
var contexto = carregaContextoCanvas('meucanvas');
if(contexto){
//clearRect(x,y,width,height) exclui uma área retangular do canvas deixando-a transparente
contexto.clearRect(60,0,42,150);
}
}
</script>
</head>
<body bgcolor="#ffff99">
<canvas id="meucanvas" width="150" height="150">
Conteúdo que só verão os usuários que não suportam canvas em seu navegador. Usa uma versão moderna de Firefox, Chrome, Safari, Opera... quase todos os navegadores exceto Explorer são compatíveis com Canvas.
</canvas>
<a href="#" onclick="excluir_parcial()">Excluído parcial</a>
</body>
</html>
A função carregaContextoCanvas() já a explicamos no anterior artigo e a utilizamos para obter o objeto de contexto do canvas, ou false em caso que o navegador não suporte o trabalho com canvas do HTML 5.
No evento window.onload definimos uma série de instruções que desenharão uma série de retângulos justo quando a página tiver terminado de se carregar.
Com a função excluir_parcial() simplesmente excluímos uma área do canvas e a esta função se chama por meio do evento onclick do link que há na parte de abaixo do código.
Podemos ver o exemplo em funcionamento em uma página à parte.
Esperamos que com estas indicações e o exemplo anterior tenha sedio possível entender corretamente o modo de desenhar retângulos em um elemento Canvas do HTML 5. Em futuros artigos veremos como desenhar outros tipos de formas. Talvez o mais complicado para desenvolvedores sem experiência seja a necessidade de trabalhar com a linguagem de programação Javascript, porém lembramos que em CriarWeb.com você pode encontrar uma série de manuais de Javascript que estão inclusive ao alcance de pessoas que não tenham programado nunca.
