Curvas Bezier em Canvas

O modelo que Bezier propõe é um tipo de função matemática para definir curvas complexas em função de vários valores. É uma técnica utilizada no desenho técnico, que surgiu inicialmente no mundo da aeronáutica e no desenho de carros e que se tornou bastante popular em razão de sua utilização em vários programas de desenho, como o conhecido Photoshop. As curvas Bezier são criadas por meio de uma fórmula matemática que permite especificar e avaliar traçados curvos que poderiam ter mais de um ponto de inflexão.

Método para desenhar curvas Bezier

bezierCurveTo(pc1x, pc1y, pc2x, pc2y, x, y)

Como vemos, se tem que especificar coordenadas de três pontos, de uma maneira similar à que conhecemos nas curvas quadráticas.

Na imagem seguinte se pode ver um diagrama sobre os pontos que se utilizam para definir uma curva Bezier.

Como podemos ver, o método bezierCurveTo() tem 6 parâmetros que correspondem às coordenadas de 3 pontos. Porém, na imagem foram utilizados até 4 pontos para definir a curva Bezier, pois o ponto de início da curva já estava no contexto do canvas. Assim que, atendendo à imagem anterior, estes seriam os pontos necessários para compor a curva Bezier:

1. O primeiro ponto, marcado de cor violeta, é o ponto inicial da curva. Este ponto não precisa ser definido, pois já está implícito no contexto do canvas, no lugar onde estava el ponteiro de desenho ao chamar o método bezierCurveTo().
   Nota: Ao desenhar qualquer segmento de um caminho temos definido sempre de antemão o ponto inicial desse segmento do caminho, pois é o lugar onde está o ponteiro de desenho. Nós poderíamos mudar esse ponteiro de desenho, para mudar o primeiro ponto da curva, com uma chamada ao método moveTo().
2. O segundo ponto, que foi marcado de cor verde, é a tendência da primeira parte da curva, que se indica com os parâmetros pc1x, pc1y.
3. O terceiro, marcado de co vermelha, é a tendência da segunda parte da curva, indicada com os parâmetros pc2x, pc2y.
4. Finalmente, temos o ponto final da curva, marcado de cor cinza, indicada com os parâmetros x,y.

Exemplo de desenho com curvas Bezier

var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
   ctx.beginPath();
   ctx.fillStyle = "#ccccff";
   ctx.moveTo(0,40);
   ctx.bezierCurveTo(75,17,70,25,100,60);
   ctx.bezierCurveTo(130,35,140,45,145,50);
   ctx.bezierCurveTo(180,45,190,55,200,70);
   ctx.lineTo(200,150);
   ctx.lineTo(0,150);
   ctx.fill();
}

A curva anterior se pode ver representada em uma página à parte.

Agora podemos complicar um pouco mais esse exemplo para criar outros caminhos com curvas Bezier, com a particularidade de que vamos preenchê-los com cores semitransparentes.

ctx.beginPath();
ctx.fillStyle = 'rgba(100,230,100,0.3)';
ctx.moveTo(0,90);
ctx.bezierCurveTo(90,7,110,15,140,30);
ctx.bezierCurveTo(130,55,140,65,145,70);
ctx.bezierCurveTo(180,45,190,55,200,95);
ctx.lineTo(200,150);
ctx.lineTo(0,150);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = 'rgba(230,230,100,0.3)';
ctx.moveTo(50,150);
ctx.bezierCurveTo(90,7,110,15,160,10);
ctx.bezierCurveTo(130,105,140,135,200,35);
ctx.lineTo(200,150);
ctx.lineTo(0,150);
ctx.fill();

Criando esses outros caminhos o exemplo fica como pode ser visto neste link.

Acrescentar um comentário ao artigo

Curvas quadráticas no canvas

FlashCanvas: elemento canvas compatível com todos os navegadores