tutorial de desenho de lona html5 (8) - método beziercurveto para desenhar curvas em tela

No artigo anterior, falei sobre três maneiras de desenhar curvas em tela: arco, arcto e quadraticcurveto. Todos eles têm uma coisa em comum, ou seja, as curvas que desenham só podem ser tendenciosas para um lado. A maior diferença entre o BezierCurveto mencionado hoje e eles têm dois pontos de controle, ou seja, podem desenhar uma curva em forma de S.

BezierCurveto, que é a chamada curva Bezier, se você aprendeu algumas ferramentas de desenho, poderá entendê-la imediatamente.

ctx.beziercurveto (x1, y1, x2, y2, x, y); Vou explicar seus parâmetros como sempre. (x1, y1) é a coordenada do ponto de controle 1, (x2, y2) é a coordenada do ponto de controle 2 e (x, y) é a coordenada de seu ponto final. Como o quadraticcurveto, suas coordenadas de ponto de partida também são predefinidas por moveto.

Portanto, BezierCurveto desenhe uma curva requer 4 pontos: ponto de partida, ponto final, ponto de controle 1, ponto de controle 2. Para a explicação subsequente, aqui presumo que o ponto de controle 1 corresponda ao ponto de partida e ao ponto de controle 2 corresponde ao ponto final

Aqui, mencionaremos o antigo problema do desenho de lona, ​​o que significa que o desenho de código é baseado na adivinhação e você precisa atualizar o desenho para entender onde você o desenha.

Continuarei a tradição anterior e desenharei algumas linhas auxiliares para ajudar todos a entender:

var x1 = 450, // a coordenada x do ponto de controle 1

y1 = 300, // y do ponto de controle 1

x2 = 450, // x do ponto de controle 2

y2 = 500, // y do ponto de controle 2

x = 300, // ponto final x

y = 500; // ponto final y

ctx.moveto (300.300); // ponto inicial

ctx.BeginPath ();

ctx.LineWidth = 5;

ctx.strokestyle = "rgba (0,0,0,1)"

ctx.moveto (300.300);

ctx.beziercurveto (x1, y1, x2, y2, x, y);

ctx.stroke ();

// Comece a desenhar linhas auxiliares

ctx.BeginPath ();

ctx.strokestyle = "rgba (255,0,0,0,5)";

ctx.LineWidth = 1;

// Conecte o ponto de partida e o ponto de controle 1

ctx.moveto (300.300);

ctx.lineto (x1, y1);

// Conecte o ponto final e o ponto de controle 2

ctx.moveto (x2, y2);

ctx.lineto (x, y);

// Conecte os pontos de partida e final (linha de base)

ctx.moveto (300.300);

ctx.lineto (x, y);

ctx.stroke ();

Aqui, primeiro desenho uma curva semelhante ao quadraticcurveto, que é tendencioso apenas para um lado. Essa linha parece ser relativamente redonda porque as coordenadas X dos pontos de controle 1 e 2 são as mesmas.

Agora desenhe uma curva em forma de S para provar que o BezierCurveto é único:

var x1 = 150;

...

De fato, basta alterar as coordenadas do ponto de controle 1. Se as coordenadas do ponto 1 de controle e o ponto de controle 2 estiverem respectivamente nos dois lados da linha de base, uma curva em forma de S é desenhada; Se ambos estão em um lado da linha de base, é um efeito semelhante ao quadraticcurveto.

A situação deste exemplo é relativamente simples. A linha de base (ponto de partida ao ponto final) é vertical, mas na maioria das vezes na aplicação real, nossa linha de base é oblíqua, portanto a situação é muito mais complicada. Mas vamos tentar você mesmo

Cada método de desenho parece relativamente único em função, mas o método poderoso é combinado por um único método. No artigo subsequente, tentei explicar alguns métodos comuns de desenho, como retângulos arredondados e elipses. Eles precisavam combinar esses métodos únicos no passado.