Outros exemplos de desenho de caminhos em elementos Canvas

Neste artigo veremos outros testes de desenho de caminhos em canvas.

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


Publicado em: 16/12/10
Valorize este artigo:
Ao longo do Manual do componente Canvas do HTML 5 vimos vários exemplos de desenho de caminhos. Se seguimos os capítulos anteriores deste manual já devemos ter conseguido um pouco de prática para desenhar linhas que seguem um caminho, preenchido de cor ou sem preenchimento. O certo é que já poderíamos passar a algum outro tema mais adiantado, porém ainda vamos falar de dois exemplos com caminhos que podem ser interessantes para acabar de entender como se criam.

No presente exemplo estamos fazendo vários caminhos em um mesmo canvas e, além disso, vamos preencher com cores diferentes cada um dos caminhos, o que será bom para seguir praticando. A ideia deste artigo é que nos possamos familiarizar um pouco mais com a prática de abrir caminhos, fechá-los e tornar a abrir outros caminhos. Além disso, podemos ver que com um mesmo caminho também podemos pintar em duas partes diferentes da tela, transferindo o ponteiro de desenho porém sem pintar.

Primeiro exemplo, pintar dois caminhos diferentes

Este primeiro exemplo teria o seguinte código:

var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
   //primeiro caminho
   ctx.beginPath();
   ctx.moveTo(20,10);
   ctx.lineTo(32,20);
   ctx.lineTo(22,20);
   ctx.lineTo(22,35);
   ctx.lineTo(17,35);
   ctx.lineTo(17,20);
   ctx.lineTo(7,20);
   //ctx.closePath(); opcional antes de um fill()
   ctx.fill();
   
   //crio um segundo caminho
   ctx.beginPath(); //testar comentar esta linha para ver o que acontece
   ctx.fillStyle = '#ff8800';
   ctx.moveTo(47,50);
   ctx.lineTo(67,70);
   ctx.lineTo(67,30);
   ctx.closePath();
   ctx.fill();
}

Nota: O fato é que este código está incompleto, pois lhe falta a função cargaContextoCanvas() que já foi explicado anteriormente no artigo Entender a tela de canvas.

Nesse código estamos realizando dois caminhos distintos sobre um mesmo canvas. O primeiro caminho está separado no código do segundo e os dois começam com um beginPath(). Em cada caminho fazemos um moveTo() para colocar o ponteiro de desenho nas coordenadas desejadas.

Em seguida, fazemos o closePath() para fechar o caminho, completando-o com uma linha reta desde o último ponto até o ponto desde onde começamos o caminho. Porém, como se pode ver no exemplo, a chamada ao método closePath() é opcional, pois estes dois caminhos se preenchem de cor com fill() e este método requer que o caminho esteja fechado. Por isso, se o caminho não foi fechado explicitamente com closePath(), com a chamada a fill() ele é feito implicitamente.

Outra coisa interessante é a mudança de cor que fazemos no segundo caminho com a propriedade fillStyle do objeto canvas, na linha:

ctx.fillStyle = '#ff8800';

O primeiro exemplo pode ser visto em funcionamento neste link.

Segundo exemplo, um caminho que pinta em dois lugares diferentes

O segundo exemplo que falta ver é muito parecido com o primeiro, com a diferença de que agora vamos desenhar a silhueta ou contorno, ao invés de preenchê-los de cor. Ademais, neste segundo exemplo só temos um caminho em vez dos dois que havia antes. Isto acontece porque fazemos só um beginPath() e embora fechemos o caminho com closePath() e em seguida façamos um moveTo() para transferir o ponteiro de desenho, na realidade só temos um caminho.

É por isso que, a troca de cor com a propriedade strokeStyle, embora seja feita no meio do código, afeta todo o traçado, pois é o mesmo caminho.

var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
   ctx.beginPath();
   ctx.moveTo(20,7);
   ctx.lineTo(32,20);
   ctx.lineTo(22,20);
   ctx.lineTo(22,35);
   ctx.lineTo(17,35);
   ctx.lineTo(17,20);
   ctx.lineTo(7,20);
   ctx.closePath();
   
   //troco a cor da linha, a cor muda para todo o traco
   ctx.strokeStyle = '#ff8800';
   
   //sigo no mesmo caminho, mas movo o ponteiro de desenho
   ctx.moveTo(47,50);
   ctx.lineTo(67,70);
   ctx.lineTo(67,30);
   ctx.closePath();
   ctx.stroke();
}

O segundo exemplo em funcionamento pode ser visto também em uma página à parte.

Temos que admitir que estes dois exemplos não significam um claro avanço com respeito ao que já havíamos relatado no manual, mas nunca é demais dar exemplos práticos. Além disso, há muitas coisas que valem a pena praticar para entender bem como se realizam. No artigo seguinte explicaremos novas técnicas para fazer linhas curvas e não apenas linhas retas como vimos até agora.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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