Balaio Tecnológico: Trabalhando com a tag Canvas do HTML5

No último post, apresentei o funcionamento básico da tag Canvas do HMTL 5, sua inserção numa página HTML e código JavaScript simples para traçar linhas na área do Canvas. Avançando nesse assunto, gostaria de apresentar aqui outras funções de desenho e como lidar com cores.

Além de linhas, a lista de funções para traçar figuras geométricas básicas inclui também funções para criar retângulos e arcos. No caso dos retângulos, há 2 funções : uma para desenhar apenas a borda, sem preencher o interior - strokeRect - e outra para desenhá-lo preenchido - fillRect.

/* ... */

ctx.beginPath();

ctx.fillRect (10,10,60,100);

ctx.strokeRect (75,10,60,100);

ctx.clearRect (30, 50, 25, 25);

ctx.closePath();

var grausFin = 360;

var radFin = (Math.PI/180) * grausFin;

ctx.beginPath();

ctx.arc(180, myCanvas.height / 2, 25, 0, radFin, false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.arc(230, myCanvas.height / 2, 25, 0, radFin, false);

ctx.fill();

ctx.closePath();

Seu navegador não suporta canvas ...

Já a função clearRect que aparece no código acima serve para limpar uma área retangular do canvas, tornando-a transparente. Isto é, a área é totalmente preenchida com a cor de fundo da tag onde o Canvas está inserido, substituindo os pixels contidos na área. A utilidade desse recurso está em preparar o canvas para receber novos desenhos sem sofrer interferência daqueles que existiam anteriormente.

Os parâmetros das funções de retângulo são sempre o ponto superior esquerdo (x, y) seu comprimento e sua altura.

Como mostra o exemplo anterior, o desenho de um círculo é feito através da função arc. O que determina se ele será preenchido ou não é a função chamada depois : use fill para preenchê-lo ou stroke para desenhar apenas o seu contorno.

Os parâmetros da função para desenhar arco são o ponto central (x, y), seu raio, o ângulo na circunferência onde o desenho será iniciado, o ângulo final e um booleano indicando se o desenho será feito no sentido anti-horário. Como diz o nome da função, ela traça um arco entre o ângulo inicial e final, formando parte de um círculo com centro em (x, y) e o raio dado. Isso implica que temos que informar os ângulos 0 (zero) e 2pi se quisermos desenhar um círculo completo. Observe que os ângulos são informados em radianos e não em graus. A fórmula (PI * 180 / graus) que aparece no exemplo faz a conversão de graus para radianos.

As cores aplicadas em linhas e nos preenchimentos são controladas de forma independente entre si. Ao traçar linhas – aí incluindo a função para desenhar somente as bordas de um retângulo ou arco – a cor é ditada pela propriedade strokeStyle do canvas, enquanto para fazer qualquer preenchimento, a cor usada é aquela atribuída ao fillStyle.

/* ... */

ctx.beginPath();

ctx.fillStyle = "rgb(45,80,150)";

ctx.strokeStyle = "maroon";

ctx.fillRect (10,10,60,100);

ctx.strokeRect (75,10,60,100);

ctx.closePath();

var grausFin = 360;

var radFin = (Math.PI/180)* grausFin;

ctx.fillStyle = "#FFA500";

ctx.strokeStyle = "green";

ctx.beginPath();

ctx.arc(180, myCanvas.height / 2, 25, 0, radFin, false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.arc(230, myCanvas.height / 2, 25, 0, radFin, false);

ctx.fill();

ctx.closePath();

Seu navegador não suporta canvas ...

No exemplo acima, utilizei cores especificando diretamente seu nome (com em “green”) ou sua composição RGB (como em "rgb(45,80,150)"). Também poderia ter usado um código hexadecimal (como em "#FFA500"). Ou seja: são os mesmos mecanismos aceitos pelo CSS3.

Um outro aspecto importante para traçar linhas e desenhar bordas é a espessura que a linha deve ter. Podemos modificar o valor contido na propriedade lineWidth do canvas para obter linhas mais grossas. O valor padrão dela que corresponde a 1 unidade, sendo que ela aceita valores positivos.

/* ... */

var angIni = 3 * Math.PI / 2;

var angFin = Math.PI / 2, x, i;

/* Linhas e arcos */

x = 5;

for (i = 0; i < 10; i ++)

{

  ctx.lineWidth = i + 1;

  ctx.lineCap = "round";

  ctx.beginPath();

  ctx.moveTo (x, 5);

  ctx.lineTo (x, 35);

  ctx.stroke(); 

  ctx.closePath();

  ctx.beginPath();

  ctx.arc(x, 75, 20, angIni, angFin, false);

  ctx.stroke();

  ctx.closePath();

  x = x + 15;

};

/* Bordas de retângulos */

ctx.beginPath();

ctx.lineWidth = 8;

ctx.strokeRect(180,  5, 100, 100);

ctx.lineWidth = 6;

ctx.strokeRect(190, 15,  80,  80);

ctx.lineWidth = 4;

ctx.strokeRect(200, 25,  60,  60);

ctx.lineWidth = 2;

ctx.strokeRect(210, 35,  40,  40);

ctx.closePath();

Seu navegador não suporta canvas ...

No exemplo acima, modifiquei também a propriedade lineCap, que determina como o desenho de linhas será arrematado. Ao usar o valor "round", instruo o canvas a arredondar as pontas das linhas ao invés de deixá-las retas, como no comportamento padrão.

No próximo post, falo sobre uso de textos, imagens e como modificar o modo que os desenhos aplicados ao canvas interagem entre si, criando composições entre eles.