En este artículo vamos a explicar cómo dibujar círculos en HTML5 Canvas utilizando las funciones nativas de renderizado del navegador. Las formas curvas aportan una estética fluida y son esenciales para programar elementos dinámicos, como personajes esféricos, efectos de partículas o interfaces de usuario.
Dibujar círculos en HTML5 Canvas resulta indispensable para dar vida a elementos de interfaz curvos y mecánicas de juego fluidas. Esta técnica te permitirá renderizar desde ruedas y proyectiles esféricos hasta complejos sistemas de partículas circulares que reaccionan en tiempo real.
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>Círculos 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 círculos en HTML5 Canvas
Ahora vamos a crear el código JavaScript para dibujar círculos 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 del círculo
let x = canvas.width / 2;
let y = canvas.height / 2;
let radio = 150;
// Comenzar el trazado del círculo
ctx.beginPath();
// Dibujo del trazado del círculo
ctx.arc(x, y, radio, 0, Math.PI*2);
// Establece el color de relleno
ctx.fillStyle = "blue";
// Efectua el relleno del círculo
ctx.fill();
// Establece el color del borde
ctx.strokeStyle = "black";
// Establece el ancho del borde en píxeles
ctx.lineWidth = 4;
// Dibuja el borde del círculo
ctx.stroke();
// Finaliza el trazado del círculo
ctx.closePath();
</script>Con este código dibujamos un círculo 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 para trabajar sobre él desde JavaScript
- Define las propiedades del círculo, como las coordenadas del centro (
x,y) y el radio (radio). - Comienza un nuevo trazado con
beginPath(). Esto es importante para indicar el inicio de un nuevo trazado, de lo contrario, el navegador mantiene el trazado anterior y podríamos sumar trazados. - Dibuja el círculo con
arc(), especificando las coordenadas del centro, radio, ángulo de inicio y ángulo final (en radianes). - Establece el color de relleno y rellenamos el trazado con
fill(). - Establece el color del trazado, el ancho del trazado y dibujamos el trazado con
stroke(). - Finaliza el trazado del círculo con
closePath().
Al abrir el archivo HTML en un navegador, deberías ver el lienzo canvas enmarcado con un borde negro y en su interior un círculo azul con un borde negro de 2 píxeles en el centro del Canvas.
Ahora que tenemos una base para dibujar círculos en HTML5 Canvas con JavaScript, podemos experimentar ajustando las propiedades del círculo, posición, tamaño y colores para crear diferentes efectos visuales.
Este artículo forma parte de la serie Introducción a los gráficos web, una guía práctica sobre HTML5, la etiqueta <canvas> y su aplicación en el desarrollo de videojuegos.
¡ Espero que este artículo sea de vuestro interés !
