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:
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í:
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.
