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

Até agora , nos posts que escrevi sobre o uso do canvas do HTML5, quando precisei me referir a uma cor nos scripts de exemplo, eu sempre usei a representação tradicional para cores estabelecida pelo CSS (Cascading Style Sheet). Isto é, as cores sempre foram especificadas como uma mistura da intensidade de vermelho, verde e azul (o código RGB) que resultasse na cor desejada. Neste post, mostro que o Canvas permite aplicar um grau de transparência às cores e também trabalhar com gradientes de cores.

As regras para cores no canvas são as mesmas definidas para o CSS. Portanto, podemos usar aqui também a função rgba(), que introduz um quarto parâmetro para controlar o nível de transparência de cores. Os 3 primeiros parâmetros são os conhecidos níveis de intensidade do vermelho, verde e azul (representados por números de 0 a 255). O último valor – chamado de alpha – corresponde ao grau de transparência a ser aplicado aos desenhos subsequentes. Ele pode assumir valores entre 0 (completamente transparente) e 1 (desenha a imagem opaca, sobrepondo totalmente o fundo, sendo esse o efeito padrão obtido até aqui).

  var myCanvas = document.getElementById("cnvCores2");

var ctx = myCanvas.getContext("2d");

var incrY = myCanvas.height / 10;

var grausFin = 360;

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

var meioCompr = myCanvas.width / 2;

ctx.font = "11px Arial";

/* Primeiro, preenche com cor do fundo opaca */

ctx.fillStyle = 'rgb(20,230,20)';

ctx.fillRect(0, 0, meioCompr, myCanvas.height / 2);

ctx.fillRect(meioCompr, myCanvas.height / 2, meioCompr, myCanvas.height / 2);

for (var i = 0; i < 10;i++) {
/* agora, pinta por cima usando branco mas variando a transparência */

ctx.fillStyle = 'rgba(255,255,255,' + (1.0 - (i / 10.0)) + ')';

ctx.fillRect(0, i*incrY, meioCompr, incrY);

ctx.fillStyle = "navy";

ctx.fillText (Math.ceil (10.0 - i) / 10.0, 8, (i+1)*incrY - 4);

}

/* preenche no centro um círculo marrom com alto grau de transparência */

ctx.beginPath();

ctx.fillStyle = 'rgba(128,0,0,0.4)';

ctx.arc(meioCompr, myCanvas.height / 4, meioCompr, 0, radFin, false);

ctx.fill();

ctx.closePath();

/* Como seria sem o parâmetro de transparência */

ctx.beginPath();

ctx.fillStyle = 'rgb(128,0,0)';

ctx.arc(meioCompr, 3 * myCanvas.height / 4, meioCompr, 0, radFin, false);

ctx.fill();   

ctx.closePath(); 
 Seu navegador (ou leitor de RSS) não suporta canvas ...

Parte do código é dedicada a escrever o grau de transparência de cada uma das faixas horizontais. Como o desenho de texto também é afetado pelo valor de fillStyle - incluindo a transparência configurada nele -, eu atribuo a ela uma outra cor sólida para que o texto esteja plenamente visível, sem qualquer interferência do fundo previamente desenhado.

Há uma propriedade do contexto de pintura chamada globalAlpha que permite mudar o grau de transparência dos desenhos, influenciando preenchimentos e contornos num único comando. Essa característica tem sua utilidade, mas é menos flexível do que controlar separadamente pelo tipo de desenho.

Uma outra forma de trabalhar com cores prevista no canvas do HTML5 é o preenchimento de áreas com um gradiente, isto é, a pintura é iniciada com uma cor e vai gradualmente se aproximando de uma segunda cor, que é finalmente usada para concluir a pintura. Estão previstos dois tipos de gradiente : um linear e outro radial. Para usar um deles, basta criar o tipo desejado, alimentar as cores que comporão o gradiente e então associá-lo à propriedade fillStyle do contexto do Canvas, exatamente como fizemos com cores e transparências.

O tipo linear é instanciado através da função createLinearGradient enquanto para o gradiente radial usamos createRadialGradient. Ambos os métodos criam objetos que respeitam a especificação da interface CanvasGradient, atualmente composta por apenas uma função cujo objetivo é adicionar pontos de parada para as cores no gradiente. Ou seja, essa função define quantas cores básicas haverão no gradiente resultante e quanto espaço cada uma ocupará nele. As cores intermediárias são calculadas automaticamente de modo a preencher toda a área definida pela função de criação.

/* Gradiente linear simples com 2 cores: uma vai do
início do retângulo até o meio e a outra do meio até o fim */

var lineargradient = ctx.createLinearGradient(0,0,120,120);

lineargradient.addColorStop (0, 'navy');

lineargradient.addColorStop (0.5, 'rgb(50,50,180)');

lineargradient.addColorStop (1, 'rgb(120,120,220)');

/* Preenche o retângulo real com o padrão gradiente criado acima */

ctx.fillStyle = lineargradient 

ctx.fillRect (0,0,180,180);

/* Outro gradiente, agora com mais cores ... */

lineargradient = ctx.createLinearGradient(0,200,180,280);

lineargradient.addColorStop (0, 'navy');

lineargradient.addColorStop (0.2, 'red');

lineargradient.addColorStop (0.8, 'rgb(50,50,180)');

lineargradient.addColorStop (1, 'green');

ctx.fillStyle = lineargradient 

ctx.fillRect (0,200,180, 280);

Seu navegador (ou leitor de RSS) não suporta canvas ...

A função createLinearGradient cria uma área retangular - definida por pontos que indicam o canto superior esquerdo e o inferior direito. O gradiente é criado nesse retângulo virtual e ele então é usado para preencher o retângulo real no canvas. Como o retângulo real pode ter tamanho diferente daquele usado para criar o gradiente, o canvas faz alguns ajustes para que caiba. Se o retângulo real for maior, a última cor de parada é usada para preencher o resto da área.

Veja que para adicionarmos uma cor de parada temos que informar um valor entre 0 e 1. Esse valor é chamado de offset e indica a que distância do início do retângulo a nova cor deve começar a aparecer. Uma cor prevalece até que a próxima cor de parada seja encontrada. Então, o tanto de espaço ocupado por cada uma é definido pelo offset da parada seguinte.

Para o gradiente radial, a principal diferença é que, ao invés do efeito ser aplicado num retângulo, ele é aplicado numa área delimitada por dois círculos Os círculos são definidos na criação do gradiente, sendo que os 3 primeiros parâmetros correspondem ao ponto central e raio do círculo inicial e os 3 parâmetros seguintes correspondem ao ponto central e raio do círculo final. A área fora dos círculos é mantida com a cor original da área preenchida.

/* Círculo com gradiente */
  var radgrad = ctx.createRadialGradient (105, 115, 20, 112, 130, 50);

  radgrad.addColorStop(0, '#FF5F98');

  radgrad.addColorStop(0.75, '#FF0188');

  radgrad.addColorStop(1, 'rgba(255,1,136,0)');

/* Ao preencher retângulo, somente a área com o gradiente circular é considerada !*/

  ctx.fillStyle = radgrad;

  ctx.fillRect(0,0,250,500);

/* Outro círculo com gradiente */

  radgrad = ctx.createRadialGradient(95,35,15,102,40,40);

  radgrad.addColorStop(0, '#00C9FF');

  radgrad.addColorStop(0.8, '#00B5E2');

  radgrad.addColorStop(1, 'rgba(0,201,255,0)');

  ctx.fillStyle = radgrad;

  ctx.fillRect(0,0,250,500);

/* Aqui , a área circular resultante é maior que o retângulo; então, o retângulo todo é preenchido */

radgrad = ctx.createRadialGradient (200, 350, 65, 200, 350, 140);

radgrad.addColorStop (0, 'navy');

radgrad.addColorStop (0.5, 'rgb(50,50,180)');

radgrad.addColorStop (1, 'rgb(120,120,220)');

ctx.fillStyle = radgrad 

ctx.fillRect (50,200,150,150);

Seu navegador (ou leitor de RSS) não suporta canvas ...

Parte do exemplo acima foi retirada do tutorial de canvas da Fundação Mozilla. Veja que a criação do gradiente aceita a função rgba(), significando que podemos aplicar transparência neste momento também.