Desenhar Caminho(Path) no canvas

Antes de começar a desenhar um caminho ou path, usamos a função beginPath, que inicializa a criação de uma nova path.

Depois de inicializada, podemos usar as funções moveTo, lineTo, arc, bezierCurveTo e rect.

Depois se quisermos, podemos fechar o caminho executando o método closePath, que desenha uma linha recta desde o ponto actual até à primeira posição.

Para terminar podemos usar a função fill ou stroke, para preencher ou traçar o caminho que foi desenhado.

Mover posição no canvas

A função moveTo, move para uma posição(x, y) do canvas a ser usada como posição de inicio para a próxima função de desenho, sem desenhar nada. Isto funciona como quando levantamos a caneta para desenhar noutro sitio.

moveTo(x, y)

Desenhar Linhas no canvas

Para criar uma linha desde a posição actual até uma posição(x,y) e mover a posição actual para essa posição usamos a função lineTo.

lineTo(x, y)

Desenhar Arcos ou Círculos no canvas

Para desenhar arcos ou círculos num caminho ou path do canvas usamos a função arc. A função arc toma como parâmetros uma posição central do arco(x,y), um raio, um ângulo inicial e final, e a indicação de uso do sentido inverso ao dos ponteiros do relógio para os ângulos.

arc(x, y, raio, anguloInicial, anguloFinal, contrarioPonteriosRelogio)

Desenhar Curvas de Bézier no canvas

A função bezierCurveTo cria uma curva de Bézier desde a posição actual no canvas até à posição(x,y) passada como parâmetro,  com os pontos de controlo (c1x, c1y) e (c2x, c2y).

bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

Exemplo – Usando um caminho ou path no canvas:

function drawPath(){

    var canvasElem = document.getElementById('areaDesenho');

    if (canvasElem.getContext) {

        //Obtém o contexto "2d" de desenho para o canvas

        var context = canvasElem.getContext('2d');



        //Desenha um triangulo azul

        context.fillStyle = "blue";

        context.beginPath();

        context.moveTo(100, 60);

        context.lineTo(50, 120);

        context.lineTo(150, 120);

        context.lineTo(100, 60);

        context.fill();

    }

}

Resultado:
O seu browser ainda não suporta HTML5!

Download do Exemplo de uso do Canvas

Para mais exemplos podem verificar o tutorial da Mozilla Developer Center.

Páginas: 1 2 3