JavaScript: Dibujar elipse y media elipse sobre Canvas

Dejar un comentario / HTML, javascript, web / Por

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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *