No artigo sobre linhas de desenho de tela, falei sobre o método de desenhar linhas retas. Este artigo sobre curvas de desenho deveria ter sido publicado há muito tempo, mas como as curvas de desenho de tela são bastante especiais, eu ainda não as descobri, então tenho que experimentá -las passo a passo.
Uma das dificuldades em desenhar curvas na tela é que ela tem 4 funções de curvas! Eles são arcos, arcto, curveto quadrático, beziercurveto. Deixe -me começar com o método de arco mais simples.
A função do arco é desenhar um arco regular, que pode ser um círculo completo ou um certo arco de um círculo.
A sintaxe do arco é a seguinte :context.arc (x, y, raio, startangle, endangle, anticlockwwise)
Vou explicar os parâmetros dele, isso é
arco (centro x, centro y, raio, ângulo de partida, ângulo final ou se é no sentido anti -horário)
O que devemos fazer se desenharmos um círculo completo com arco? Todos notaram que existe um ângulo de partida e um ângulo final nos parâmetros. Se nosso ângulo de partida for 0 e o ângulo final é 360, não é um círculo perfeito?
Solução correta! Mas deve -se notar que o ângulo aqui é representado por radianos (e o flash também). Um círculo completo é de 360 graus, que são radianos de 2PI.
Então, escrevemos isso :ctx.arc (400,400,20,0, math.pi*2);
ctx.fill ();
ctx.stroke ();
Como o lineto, o arco também é um caminho a ser desenhado, por isso temos que chamar o método de preenchimento ou traço por trás dele para mostrar a figura (o Strokestyle vermelho e o estilo de preenchimento vermelho translúcido são usados na figura).
Agora vamos desenhar um círculo de 1/4, o ângulo é de 90 graus. Como mencionado anteriormente, o ângulo de 360 graus é de 2PI radianos, então o ângulo de 10 graus é 2PI/360 = PI/180 radianos, então 90 graus é 2PI/360*90 = PI/2 radianos (calcule outros ângulos por você).
ctx.arc (400,400,20,0, math.pi*2/4);
A partir da figura, podemos determinar que o grau 0 de arco é o grau comumente usado em matemática, mas o ângulo é aberto no sentido horário por padrão, o que é oposto ao modelo matemático (relacionado às coordenadas, porque as coordenadas de tela também são opostas às coordenadas matemáticas).
Mas não existe um parâmetro na frente que determina se é no sentido anti -horário? Que tal o definimos como verdadeiro?
ctx.arc (400,400,20,0, math.pi*2/4, verdadeiro);
Você verá que o ângulo se torna no sentido anti-horário, fazendo com que o arco se torne 360-90 = 270 graus.
mas! Uma coisa que você deve prestar atenção é que o método de cálculo do ponto de partida e o ponto final é sempre baseado em 0 graus e se estende no sentido horário, e não há como dizer que a Cisco e o oposto são verdadeiros. O sentido anti -horário é exatamente a direção do arco.
Isso não apenas impede que a confusão vá para frente e para trás, mas também facilita o calcule.
No entanto, o uso flexível do sentido anti -horário às vezes é útil.
No exemplo acima, nosso ângulo de partida é 0. Agora, vamos tentar outros ângulos de partida, como 90 graus.
ctx.arc (400.400.20, math.pi*2/4, math.pi*2+math.pi);
Se nosso ponto de partida for de 90 graus e o ponto final for de 90 graus, o resultado é que nada pode ser desenhado, então mudei o ângulo do ponto final para 180 graus e finalmente recebi a figura na figura abaixo.
Pergunta : Se desenharmos um círculo completo de um ponto de partida que não é de 0 grau, está tudo bem? Obviamente, também é possível, desde que você defina o ponto final do arco a 360 graus + o ângulo inicial, como:ctx.arc (400.400,20, math.pi*2/4, math.pi*2+math.pi*2/4); // O ponto de partida é de 90 graus, o ponto final é 360+90 graus
No entanto, essa abordagem é puramente uma questão de encontrar problemas sem problemas, e as pessoas normais não a usarão.
Resumo : O método de arco da Canvas é desenhar arcos regulares, e você só pode desenhar arcos regulares, e não pode desenhar outros arcos estranhos, como em forma de S-embora eu goste mais de Sp.