Exemplo 2 de desenho de caminhos em canvas

Segundo exemplo sobre os caminhos no elemento canvas, onde veremos as funções closePath() e stroke().

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 04/9/10
Valorize este artigo:
O elemento canvas é uma tela na qual podemos desenhar diretamente com funções Javascript, que já tem aplicações infinitas no desenvolvimento de webs. Explicamos este elemento no Manual de Canvas do HTML 5 e no presente artigo vamos continuar falando do desenho de caminhos, vendo duas novas funções do API de Canvas. Convém, no entanto, assinalar que começamos a explicar o tema sobre caminhos em canvas em Caminhos em Canvas do HTML 5.

No presente artigo veremos duas novas funções úteis na criação de caminhos, que são closePath(), para fechar um caminho e stroke(), para desenhar o caminho realizado através de uma linha. As duas funções, como qualquer outra função de desenho na tela de canvas, são métodos do objeto contexto do canvas, obtidas a partir do elemento canvas com as correspondentes funções de Javascript, tal como vimos anteriormente neste manual. Veremos estas novas funções para desenho de caminhos com um exemplo, porém antes vamos explicá-las detalhadamente.

Função closePath()

Serve para fechar um caminho voltando ao ponto inicial do desenho. Recordemos que o caminho tem um ponto inicial no que nos situamos para começar o desenho, com moveTo(). Depois, vamos desenhando segmentos no caminho por meio de linhas que nos levam a outros pontos da tela. Pois, closePath() seria como desenhar uma linha reta desde o ponto onde tenha ficado o caminho até o ponto inicial onde começamos a construí-lo. O método closePath() não recebe nenhum parâmetro.

Funçãostroke()

Com o método stroke() podemos desenhar uma linha por todo o trajeto do caminho que tenhamos criado por meio de seus diferentes segmentos. É similar ao método fill(), explicado no artigo anterior, com a diferença de que fill() preenchia de cor e stroke() apenas desenha o contorno. Além disso, no caso de fill() se necessita ter o caminho fechado, razão pela qual se fecha automaticamente se não o havíamos feito e stroke() realmente pode estar descontinuada, já que é apenas uma linha o que se desenha e não uma área.

Exemplo de caminho com closePath() e stroke()

A seguir vamos dar outro exemplo de desenho com o API de canvas e utilizando funções para a realização de caminhos. Para complicá-lo um pouco, vamos criar o caminho com um loop no qual, a cada iteração, desenharemos um segmento do caminho. O resultado que vamos obter é uma espécie de perfil de uma escada.

ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
   if((i%2)!=0){
      ctx.lineTo(i+5,i);
   }else{
      ctx.lineTo(i,i+5);
   }
}
ctx.lineTo(1,i);
ctx.closePath();
ctx.stroke();

Nota:Primeiro cabe advertir mais uma vez que para executar esse código necessitamos uma variável à que chamamos "ctx" que contém o contexto do canvas, que é sobre a que invocaremos os diferentes métodos para desenhar no canvas.

No script começamos o caminho com beginPath(), depois com moveTo(1,1) nos situamos no ponto onde desejamos começar o desenho. A seguir, realizamos um loop for para desenhar diversas linhas em diversas coordenadas.

Terminamos fazendo uma última linha com lineTo() e depois um closePath() para desenhar uma linha final até o ponto de início do caminho, que fechará o contorno realizado. Com stroke()desenhamos uma linha passando por todos os segmentos que completam o caminho desenhado.

Este exemplo, podemos vê-lo em uma página à parte.

Exemplo de linha descontínua

Se observamos o exemplo anterior em funcionamento teremos visto que na realidade há dois exemplos de canvas. O segundo é igual ao primeiro, ou quase igual, com a única diferença de que o caminho não está fechado e é formado por uma linha descontinua. Isto se pode fazer perfeitamente com stroke(), pois para pintar linhas não é necessário que fechem completamente o caminho.

O desenho anterior foi realizado com um código como o que segue:

ctx.beginPath();
ctx.moveTo(1,1);
for (i=1;i<100;i+=5){
   if((i%2)!=0){
      ctx.lineTo(i+5,i);
   }else{
      ctx.moveTo(i,i+5);
   }
}
ctx.stroke();

Exemplo completo de desenho de linhas com caminhos em canvas

Para todos os interessados, colocamos a seguir o código completo deste exemplo.

<html>
<head>
   <title>Canvas Caminhos com stroke</title>
<script>
//Recebe um identificador do elemento canvas e carrega o canvas
//Retorna o contexto do canvas ou FALSE se não pode ser obtido
function cargaContextoCanvas(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 ctx = cargaContextoCanvas('meucanvas');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(1,1);
      for (i=1;i<100;i+=5){
         if((i%2)!=0){
            ctx.lineTo(i+5,i);
         }else{
            ctx.lineTo(i,i+5);
         }
      }
      ctx.lineTo(1,i);
      ctx.closePath();
      ctx.stroke();
   }
   
   
   //outro exemplo baseado no mesmo código
   var ctx = cargaContextoCanvas('meucanvas2');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(1,1);
      for (i=1;i<100;i+=5){
         if((i%2)!=0){
            ctx.lineTo(i+5,i);
         }else{
            ctx.moveTo(i,i+5);
         }
      }
      ctx.stroke();
   }
}

</script>

</head>

<body>

<canvas id="meucanvas" width="150" height="150">
Recicle seu browser, POR FAVOR!!
</canvas>

<br>
<br>

<canvas id="meucanvas2" width="150" height="150">
POR FAVOR, Recicle seu navegador!!
</canvas>

</body>
</html>

Podemos acessar uma página com o exemplo em funcionamento.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato