En el artículo sobre líneas de dibujo de lienzo, hablé sobre el método de dibujar líneas rectas. Este artículo sobre curvas de dibujo debería haberse publicado hace mucho tiempo, pero debido a que las curvas de dibujo de lienzo son bastante especiales, aún no las he descubierto, así que tengo que probarlas paso a paso.
¡Una de las dificultades para dibujar curvas en lienzo es que tiene 4 funciones de curvas! Son arco, arcto, curveto cuadrático, beziercurveto. Permítanme comenzar con el método ARC más simple.
La función del arco es dibujar un arco normal, que puede ser un círculo completo o un cierto arco de un círculo.
La sintaxis del arco es la siguiente :context.arc (x, y, radio, startangle, endangle, en sentido antihorario)
Explicaré sus parámetros, eso es
arco (centro x, centro y, radio, ángulo de arranque, ángulo de finalización o si es en sentido antihorario)
¿Qué debemos hacer si dibujamos un círculo completo con arco? Todos notaron que hay un ángulo inicial y un ángulo final en los parámetros. Si nuestro ángulo inicial es 0 y el ángulo final es 360, ¿no es un círculo perfecto?
Solución correcta! Pero debe tenerse en cuenta que el ángulo aquí está representado por radianes (y también lo es Flash). Un círculo completo es de 360 grados, que es 2pi radianes.
Entonces escribimos esto :CTX.ARC (400,400,20,0, Math.Pi*2);
ctx.fill ();
ctx.stroke ();
Al igual que Lineto, el arco también es una ruta para dibujar, por lo que tenemos que llamar al método de relleno o trazo detrás de él para mostrar la figura (el estilo rojo Strokestyle y el estilo rojo translúcido se usan en la figura).
Ahora dibujemos un círculo 1/4, el ángulo es de 90 grados. Como se mencionó anteriormente, el ángulo de 360 grados es 2pi radianes, entonces el ángulo de 10 grados es 2pi/360 = PI/180 radianes, entonces 90 grados es 2pi/360*90 = PI/2 radianes (calcule otros ángulos por sí mismo).
CTX.ARC (400,400,20,0, Math.Pi*2/4);
A partir de la figura, podemos determinar que el 0 grado de arco es el 0 grado de 0 en matemáticas comúnmente utilizados, pero el ángulo se abre en sentido horario de forma predeterminada, que es opuesta al modelo matemático (relacionado con las coordenadas, porque las coordenadas de lienzo también son opuestas a las coordenadas matemáticas).
Pero, ¿no hay un parámetro frente a él que determine si es en sentido antihorario? ¿Qué tal si lo fijamos en verdad?
CTX.ARC (400,400,20,0, Math.Pi*2/4, verdadero);
Verá que el ángulo se vuelve en sentido antihorario, lo que hace que el arco se convierta en 360-90 = 270 grados.
¡pero! Una cosa a la que debe prestar atención es que el método de cálculo del punto de partida y el punto final siempre se basa en 0 grados y se extiende en el sentido de las agujas del reloj, y no se dice que el Cisco y lo contrario son verdaderos. El en sentido antihorario es solo la dirección del arco.
Esto no solo evita que la confusión ir y vaya, sino que también facilita la calcular.
Sin embargo, el uso flexible de en sentido antihorario a veces es útil.
En el ejemplo anterior, nuestro ángulo inicial es 0. Ahora intentemos otros ángulos iniciales, como 90 grados.
CTX.ARC (400,400,20, Math.Pi*2/4, Math.Pi*2+Math.pi);
Si nuestro punto de partida es de 90 grados y el punto final es de 90 grados, entonces el resultado es que no se puede dibujar nada, por lo que cambié el ángulo del punto final a 180 grados y finalmente obtuve la figura en la figura a continuación.
Pregunta : Si dibujamos un círculo completo desde un punto de partida sin 0 grados, ¿está bien? Por supuesto, también es posible, siempre y cuando establezca el punto final del arco a 360 grados + el ángulo inicial, como:CTX.ARC (400,400,20, Math.Pi*2/4, Math.Pi*2+Math.pi*2/4); // El punto de partida es de 90 grados, el punto final es 360+90 grados
Sin embargo, este enfoque es puramente una cuestión de encontrar problemas sin ningún problema, y las personas normales no lo usarán.
Resumen : el método de arco de lona es dibujar arcos regulares, y solo puede dibujar arcos regulares, y no puede dibujar otros arcos extraños, como en forma de S, aunque me gusta más en forma de S.