Hemos estado haciendo varios trazos y figuras geométricas con Canvas y JavaScript. Hicimos líneas, dibujamos texto, triángulos, cuadrados, círculos y otras figuras variadas.

Hoy vamos a terminar esta serie de tutoriales viendo cómo dibujar una elipse en JavaScript a través de la función ellipse.

También vamos a ver cómo dibujar media elipse y cómo rotar a la misma.

Función ellipse en canvas de JavaScript

La sintaxis de esta función es la siguiente:

contexto.ellipse(x, y, radioX, radioY, rotacion, anguloInicio, anguloFin);

El argumento x e y indican las coordenadas del centro. Después tenemos dos radios, pues una elipse tiene 2, ya que si solo tuviera uno, sería un círculo.

La rotación se especifica en radianes; por defecto es 0 pero se puede obtener al dividir Math.PI. Por ejemplo, para rotarla 90 grados hay que rotarla Math.PI / 2.

Finalmente se especifican los ángulos de inicio y fin, que nos van a permitir dibujar toda una elipse o una parte de ella.

Dibujar elipse con JavaScript

Veamos el código de ejemplo a continuación:

See the gist on github.

Puedes probar el ejemplo aquí.

Media elipse

Para dibujar una media elipse cambiamos el ángulo de inicio y lo demás se queda intacto. El código completo queda así:

See the gist on github.

Ahora el ángulo de inicio es Math.PI en lugar de cero.

Prueba el código aquí.

Conclusión

Recuerda que puedes cambiar el valor del radio en X y en Y, además de rotar la elipse como quieras.