JavaScript: Dibujar elipse y media elipse sobre Canvas

Elipse en Canvas con JavaScript

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

Elipse en Canvas con JavaScript

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Elipse con canvas</title>
  </head>
  <body>
  <h1>Elipse con canvas y JavaScript</h1>
  <a href="//parzibyte.me/blog">By Parzibyte</a>
  <br>
  <canvas id="canvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>

/**
 * Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
 * 
 * https://parzibyte.me/blog
 */const ALTURA_CANVAS = 200,
 ANCHURA_CANVAS = 400;

// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#81C784";
// Las variables indican el nombre de cada argumento para
// la función ellipse
let x = 100,
 y = 100,
 radioX = 50,
 radioY = 80,
 // Rotación expresada en radianes,
 // que puedes obtener dividiendo
 // Math.PI. Por ejemplo, para una
 // elipse "horizontal" la rotación
 // debería estar en Math.PI / 2
 rotacion = 0,
 anguloInicio = 0,
 anguloFin = Math.PI * 2;
contexto.ellipse(x, y, radioX, radioY, rotacion, anguloInicio, anguloFin);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();

Media elipse

Mitad de elipse sobre canvas

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

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Media elipse con canvas</title>
</head>

<body>
 <h1>Media elipse con canvas y JavaScript</h1>
 <a href="//parzibyte.me/blog">By Parzibyte</a>
 <br>
 <canvas id="canvas"></canvas>
 <script src="script.js"></script>
  </body>
</html>

/**
 * Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
 * 
 * https://parzibyte.me/blog
 */const ALTURA_CANVAS = 200,
 ANCHURA_CANVAS = 400;

// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#81C784";
// Las variables indican el nombre de cada argumento para
// la función ellipse
let x = 100,
 y = 100,
 radioX = 50,
 radioY = 80,
 // Rotación expresada en radianes,
 // que puedes obtener dividiendo
 // Math.PI. Por ejemplo, para una
 // elipse "horizontal" la rotación
 // debería estar en Math.PI / 2
 rotacion = 0,
 anguloInicio = Math.PI, // Para que sea a la mitad
 anguloFin = Math.PI * 2;
contexto.ellipse(x, y, radioX, radioY, rotacion, anguloInicio, anguloFin);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();

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

Conclusión

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

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/