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.
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.
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();
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.
Recuerda que puedes cambiar el valor del radio en X
y en Y
, además de rotar la elipse como quieras.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.