Cómo dibujar una elipse en el lienzo en HTML5

Canvas en HTML5 no proporciona directamente un método para dibujar elipses. El siguiente es un resumen de varios métodos de pintura. Cada método tiene sus propias ventajas y desventajas, y la elección debe basarse en la situación. Los parámetros para cada método son los mismos. Aquí hay dos métodos comunes.

Material de herramienta: navegador, editor

Método 1: Método de ecuación paramétrica.

1. Los parámetros X e Y de la función son el centro de la elipse, A y B son las longitudes de los semiejes horizontal y vertical de la elipse respectivamente, y no pueden ser cero al mismo tiempo. tiempo. La desventaja de este método es que cuando el ancho de la línea es más ancho y la elipse es más plana, el extremo del eje largo dentro de la elipse es más nítido y desigual, lo que resulta en una menor eficiencia. El código es el siguiente:

¿Función? ParamEllipse(context,?x,?y,?one,?b)

{

//max es igual a 1 dividido por el mayor de los valores del eje principal A y b.

//Aumento 1/max en cada bucle, lo que significa que el grado aumenta.

//Esto puede hacer que la ruta (arco) dibujada en cada ciclo se acerque a 1 píxel.

var? ¿paso? =?(a?gt?b)? 1?/?Respuesta? ：?1?/?b;

context.begin ruta();

context.moveTo(x??一,?y);? //Comienza a dibujar desde el extremo izquierdo de la elipse.

¿Para qué? (var?i?=?0;?i?lt?2?*?math.PI;?i?=?step)

{

//La ecuación paramétrica es x? =?¿Respuesta? *?cos(i),? ¿y? =?b? *? Sin (1),

//El parámetro es I, que significa grados (radianes).

context.lineTo(x? ?Answer?*?Math.cos(i),?y? ?b?*?math . sin(I));

}

contexto.cerrar ruta();

contexto();

}; Método 2: método de compresión uniforme. El método consiste en utilizar el método del arco para dibujar un círculo, combinado con escala, escala en la dirección del eje horizontal o vertical (compresión uniforme). Para una elipse dibujada de esta manera, cuanto más cerca esté el borde del extremo del eje mayor, más gruesa será la anchura de la línea del extremo del eje mayor. Cuanto más cerca esté el borde del eje menor, más plana y delgada será la elipse, o. incluso discontinuo. Este es el resultado del escalado. Esta desventaja es a veces una ventaja, por ejemplo, cuando se muestra el efecto tridimensional de un anillo.

¿Función? EvenCompEllipse(context,?x,?y,?one,?b)

{

context . save();

//Seleccione A y B El más grande se utiliza como parámetro de radio del método del arco.

var? r? =?(a?gt?b)? ¿respuesta? :?b;?

var? relaciónX? =?¿Respuesta? /?r;? //Relación de escala del eje horizontal

var? ¿razón? =?b? /?r;? //Relación de escala del eje vertical

context.scale(ratioX, ratioY);? //Escala (compresión uniforme)

context .start path();

//Dibuja en sentido antihorario desde el extremo izquierdo de la elipse.

context.moveTo((x? ?a)?/?ratioX,?y?/?ratioY);

context.arc(x?/?ratioX,?y? /?racionalmente. p>

contexto .restore();

};