Elipses en HTML5 Canvas

por

En este artículo vamos a explicar cómo dibujar elipses en HTML5 Canvas y la API que nos proporciona el navegador para renderizar gráficos. Dibujar elipses es similar a dibujar círculos, una tarea común al crear videojuegos, visualizaciones o cualquier otra aplicación que requiera gráficos interactivos. En este artículo, vamos a explicar cómo dibujar elipses y sus pequeñas diferencias con los círculos, utilizando HTML5 Canvas y JavaScript. También puedes consultar el artículo donde explico los diferentes tipos de trazados en HTML5 Canvas que se pueden dibujar con la API de JavaScript.

Crear un lienzo canvas

Lo primero que necesitamos es configurar nuestro documento HTML con un elemento Canvas, el cual nos proporcionará una área gráfica para dibujar, comúnmente llamado lienzo canvas. Un ejemplo básico sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elipses en HTML5 Canvas</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="miCanvas" width="800" height="600">Canvas no soportado</canvas>
</body>
</html>

En este ejemplo hemos creado un lienzo HTML5 Canvas con las etiquetas <canvas></canvas> y los siguientes atributos:

  • ID Es un identificador único para referirnos al lienzo desde JavaScript y dibujar en él
  • width, height Son las dimensiones en píxeles de nuestro lienzo o ventana gráfica
  • El texto entre las etiquetas sólo se mostrará si el navegador no soporta la tecnología de dibujo HTML5 Canvas

Dibujo de elipses en HTML5 Canvas

Ahora vamos a crear el código JavaScript para dibujar una elipse en nuestro Canvas HTML5. Este código JavaScript vamos a insertarlo justo debajo de las etiquetas <canvas></canvas>:

  <script>
    // Obtener el elemento Canvas
    let canvas = document.getElementById("miCanvas");
    // Obtener el contexto de dibujo 2D
    let ctx = canvas.getContext("2d");
  
    // Definir las propiedades de la elipse
    let x = 400;
    let y = 300;
    let radioX = 200;
    let radioY = 100;
  
    // Comenzar el trazado de la elipse
    ctx.beginPath();
    // Dibujar la elipse
    ctx.ellipse(x, y, radioX, radioY, 0, 0, 2 * Math.PI);
    // Establecer el color de relleno
    ctx.fillStyle = "blue";
    // Rellenar la elipse
    ctx.fill();
    // Establecer el color del borde
    ctx.strokeStyle = "black";
    // Establecer el ancho del borde
    ctx.lineWidth = 2;
    // Dibujar el borde de la elipse
    ctx.stroke();
    // Finalizar el trazado de la elipse
    ctx.closePath();
  </script>

Con este código dibujamos una elipse utilizando la API gráfica JavaScript que nos proporcionan HTML5 y Canvas. Para ello realizamos unas cuantas acciones:

  • Obtiene el elemento Canvas y su contexto de dibujo 2D.
  • Define las propiedades de la elipse, como las coordenadas del centro (x, y) y los radios horizontal y vertical en (radioX, radioY).
  • Comienza un nuevo trazado con beginPath().
  • Dibuja la elipse con ellipse(), especificando las coordenadas del centro, los radios horizontal y vertical, el ángulo de rotación (en este caso, 0 para ninguna rotación) y el rango angular completo (de 0 a 2π para una elipse completa).
  • Establece el color de relleno y llena la elipse con fill().
  • Establece el color del borde, el ancho del borde y dibuja el borde con stroke().
  • Finaliza el trazado de la elipse con closePath().

Al abrir tu archivo HTML en un navegador, deberías ver una elipse azul con un borde negro en el Canvas.

Elipses en HTML5 Canvas

Ahora que tenemos una base para dibujar elipses en HTML5 Canvas con JavaScript, podemos experimentar ajustando las propiedades de posición, tamaño y colores y añadirlo a otras formas gráficas de trazados para crear diferentes dibujos y efectos visuales.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario