Vamos continuar falando sobre o método de desenhar curvas na tela. Hoje vou falar sobre quadraticcurveto.
Para ser sincero, esse método é um pouco assustador, você pode primeiro experimentá -lo com o nome da função. A propósito, acho que é necessário reduzir esse nome de função.
quadrático significa quadrático, ou seja, a equação quadrática quadrática em matemática. Os parâmetros de ctx.quadraticcurveto são os seguintes:
ctx.quadraticcurveto (x1, y1, x, y);
Onde X e Y são as coordenadas do ponto final e x1 e y1 são as coordenadas do ponto de controle da curva? O que? Você me pergunta onde está o ponto de partida? O ponto de partida é determinado usando o Moveto antes disso.
A razão pela qual coloquei as coordenadas do ponto de controle com o número 1 da série é porque a função das curvas de desenho mencionadas posteriormente tem dois pontos de controle, que são x2 e y2, então darei uma vacinação aqui primeiro.
O ponto de partida determinado por Moveto e o ponto final determinado pelo próprio quadraticcurveto pode ser conectado a uma linha reta. Como o quadraticcurveto possui apenas um ponto de controle, esse ponto de controle está no lado esquerdo da linha ou no lado direito da linha, portanto o quadraticcurveto pode desenhar apenas arcos, mas ainda não pode desenhar uma linha em forma de S.
Por uma questão de entendimento fácil, continuarei usando o método de desenhar linhas auxiliares no artigo anterior. O código preliminar é o seguinte:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.BeginPath ();
ctx.strokestyle = "#000";
ctx.moveto (300.300); // ponto inicial
ctx.quadraticcurveto (x1, y1, x, y); // curva real
ctx.stroke ();
ctx.BeginPath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.moveto (300.300);
ctx.lineto (x1, y1); // Esta linha e a próxima linha são as linhas que desenham o ponto de controle
ctx.lineto (x, y);
ctx.moveto (300.300); // os pontos iniciais e finais dos pontos de partida e final da curva
ctx.lineto (x, y);
ctx.stroke ();
Aqui eu desenhei duas linhas auxiliares, uma é a linha de conexão entre o ponto de partida e o ponto final, e o outro é a linha auxiliar entre o ponto de partida e o ponto de controle e depois para o ponto final (na verdade dois). A interseção dessas duas linhas é a coordenada do ponto de controle do quadraticcurveto.
O quadraticcurveto só pode desenhar curvas nos arcos, mas esse arco pode ser muito irregular, o que também é uma melhoria em comparação com o arco e o arco.
Além disso, o quadraticcurveto não terá uma reversão como o Arcto.
Obviamente, se você puxar o ponto de controle muito longe, os gráficos poderão se tornar irreconhecíveis para você. Vamos tentar:
y1 = 950;
Acabei de mudar o Y1 um pouco maior, e a curva foi além da variedade de lona.
No entanto, a gama de curvas desenhadas pelo quadraticcurveto nunca pode alcançar ou exceder as coordenadas do ponto de controle. Precisamos controlar bem o ponto de controle, para que não precisemos nos preocupar.
Escrevi uma página de exemplo em movimento simples mostrando o processo de desenho de curvas no quadraticcurveto, na esperança de ajudá -lo a aprofundar seu entendimento:
Por favor, seja mais inclusivo se o código for escrito feio.