Comentários: Arc, 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 são dois pontos de controle, ou seja, a curva em forma de S pode ser desenhada. Amigos interessados podem aprender sobre isso.
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.
A sintaxe de BezierCurveto é a seguinte:
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, o BEZIERCURVETO DAT A CURVE requer 4 pontos: ponto de partida, ponto final, ponto de controle 1, ponto de controle 2. Por uma questão de 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.