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:
<!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="https://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
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="https://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.