Marcar os links já visitados pelo usuário

É muito importante marcar os links já visitados pelos usuários e agora veremos a razão de tal afirmação.

Por Pedro Rubio e Juan F. Calderón Tradução de CRV


Publicado em: 16/8/10
Valorize este artigo:
O canvas é um dos elementos mais novos do HTML 5, que já começamos a explicar no artigo de Introdução ao Canvas. Em artigos anteriores vimos exemplos de diversos desenhos em um elemento canvas, como os retângulos . Agora, vamos continuar aprendendo como desenhar diversas estruturas por meio dos caminhos.

Em canvas existem diversas funções que nos podem servir para desenhar silhuetas personalizadas , que se devem utilizar de maneira complementar. O processo passa por situar-se em um ponto da tela, depois definir cada um dos pontos pelos que passa nosso caminho e então colorir dentro, ou simplesmente desenhar a linha que passaria por todos esses pontos. Neste artigo veremos como preencher com cor toda a área que fica definida por um caminho.

Vejamos, para começar, um resumo de algumas funções disponíveis para fazer caminhos, as quais usaremos durante o presente artigo.

Função beginPath()

Esta função serve para dizer ao contexto do canvas que vamos começar a desenhar um caminho. Não tem nenhum parâmetro e por si só não executa nenhuma ação visível no canvas. Uma vez invocada a função poderemos começar a desenhar o caminho acrescentando segmentos para completá-lo com diferentes funções de caminhos. ,p>
Nota: As funções beginPath() e sequentes são na realidade métodos do objeto de contexto do canvas. Este objeto que mantêm o contexto do canvas tem de ser tirado via Javascript, a partir do elemento canvas onde desejemos desenhar. Como trabalhar e tirar o contexto de um canvas já foi explicado no artigo artículo Exemplo de desenho com o API de canvas
.

Segundo os testes realizados, poderíamos iniciar um caminho sem utilizar antes beginPath() já que o efeito, à primeira vista, é o mesmo mesmo quando não o invocamos ( entendo que o navegador o invoca por nós ao começar a utilizar as funções de caminhos em canvas). Contudo, é recomendável fazer as coisas corretamente e invocá-lo antes de começar um caminho.

Função moveTo()

Serve para mover o ponteiro imaginário onde começaremos a fazer o caminho. Esta função não desenha nada em si, mas nos permite definir o primeiro ponto de um caminho. Chamar esta função é como se levantássemos o lápis da tela e o mudássemos , sem pintar, a outra posição.

Recebe como parâmetro os pontos x e y. onde começa a mover-se o ponteiro para o desenho. Para saber qual o ponto de onde desejamos mudar (x , y), lembrem que o eixo de coordenadas do canvas é o canto superior à esquerda.

Função lineTo()

Esta função faz com que se desenhe uma linha reta, a partir a posição atual do ponteiro de desenho até o ponto (x, y) que se indique como parâmetro. O método lineTo(), portanto é como se pousássemos o lápis sobre a tela na posição atual e o arrastássemos, desenhando uma linha reta até o ponto onde se definiu ao invocar o método.

A posição atual do caminho podemos tê-la indicado previamente com um moveTo(), ou onde tenhamos terminado uma linha desenhada anteriormente..Se não se indicou antes uma posição de nosso ponteiro de desenho , lineTo() não desenha nenhuma linha e se terá que levar em conta as coordenadas enviadas como parâmetro para posicionar apenas o ponteiro do desenho aí. Dito de outra maneira, se não se disse onde começar o desenho, ou se não se desenhou nenhum outro, segmento no caminho anteriormente, lineTo() será equivalente a moveTo().

Função fill()

Este método do contexto do canvas serve para preencher com cor a área circunscrita por um caminho. Para preencher com cor um caminho, o caminho teria que estar fechado, razão pela qual, se não estiver, automaticamente se fechará com uma linha reta até o primeiro ponto do caminho. Ou seja, onde começamos a desenhar. No entanto, se durante os distintos segmentos do caminho deixamos algum segmento aberto, não se pintará nada.

Como dissemos, se não chegamos a fechar o caminho, o método fill() o fechará por nós, mas poderíamos utilizar explicitamente o método closePath() para fazê-lo nós mesmos. ( Explicaremos o método closePath em artigos futuros).

Exemplo de caminho simples.

Com as funções vistas até o momento já podemos fazer uns primeiros testes de caminhos em canvas. Agora vamos ver como poderíamos realizar um buraco no canvas, preenchido com cor

ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(75,65);
ctx.lineTo(50,125);
ctx.lineTo(25,65);
ctx.fill();

Como se pode ver, iniciamos um caminho com beginPath(). Depois fizemos um moveTo() para indicar o ponto onde começará o caminho. Posteriormente desenhamos várias linhas em diversos pontos do canvas, para terminar invocando o método fill(), com o que preenchemos de cor o caminho.

Observem que o caminho não chegou a ser fechado. Por isso o fill() o fechará por nós com uma linha ao primeiro ponto onde começamos o desenho.

Nota: Para executar estas linhas de código necessitaremos uma instancia do objeto contexto do canvas, para invocar todos os métodos sobre ele. O objeto do canvas é obtido na variável "ctx" no código do exemplo. No código completo do exercício poderemos ver a função que se poderia utilizar para conseguir o contexto.

Código completo de exemplo do caminho.

A seguir podemos encontrar o código completo deste exemplo de construção de um caminho com o elemento Canvas do HTML 5.

<html>
<head>
   <title>Canvas Caminhos</title>
<script>
//A já conhecida função para carregar o contexto de um canvas
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 ctx = carregaContextoCanvas('meucanvas');
   if(ctx){
      ctx.beginPath();
      ctx.moveTo(50,5);
      ctx.lineTo(75,65);
      ctx.lineTo(50,125);
      ctx.lineTo(25,65);
      ctx.fill();
   }
}
</script>
</head>

<body>
<canvas id="meucanvas" width="150" height="150">
Tenha acesso a este script com um navegador que aceita canvas do HTML 5
</canvas>
</body>
</html>

Para terminar, podemos ver o exemplo funcionando em uma página à parte.





Comentários do artigo
Foram enviados 2 comentários ao artigo
1 comentário não revisado
1 comentário revisado:
Falta de concordância
Por: fane87
18/8/10
O que este artigo tem haver com links já visitados?

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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