Dibujar un círculo en HTML5 Canvas usando JavaScript

Los gráficos son una parte importante de cualquier aplicación web. HTML proporciona dos formas de crear gráficos, la primera es canvas y otra es SVG. En la publicación de hoy, vamos a aprender cómo crear gráficos, particularmente círculos (bidimensionales) en HTML usando lienzo y JavaScript.

Dibujar un círculo por canvas en HTML usando JavaScript

Canvas es un elemento predeterminado proporcionado por HTML que se utiliza para dibujar gráficos en aplicaciones web. No es más que un área rectangular en la página sin borde ni contenido. Los usuarios pueden usar esta área rectangular para dibujar gráficos.

Los gráficos renderizados en lienzo son diferentes a los estilos HTML y CSS normales. Todo el lienzo con todos los gráficos que contiene se trata como un solo elemento dom.

Métodos de canvas en HTML

1. getContext(): Es un método incorporado proporcionado por canvas que devuelve el contexto de dibujo en el lienzo dependiendo del contextType. Si el identificador de contexto no es compatible o ya está configurado, devolverá null. Los tipos de contexto admitidos son 2d, webgl, webgl2 y bitmaprenderer.
2. beginPath(): Es un método incorporado proporcionado por canvas que comienza la ruta o restablece la ruta ya existente para dibujar los gráficos.
3. arc(): es un método incorporado proporcionado por canvas que se utiliza para crear un arco del círculo en la ruta actual en función de los parámetros de entrada.
4. fill(): es un método incorporado proporcionado por canvas que se utiliza para rellenar la ruta actual con el color especificado. Los usuarios también pueden especificar la región como nonzero y evenodd.
5. stroke(): es un método incorporado proporcionado por canvas que se utiliza para delinear la ruta actual con el estilo de trazo dado.

Sintaxis de arco

context.arc(
    $centerX, $centerY, $radius, $startAngle, $endAngle, $counterclockwise);

Parámetros

• $centerX: Es un parámetro obligatorio que especifica la X o coordenada horizontal / punto central del círculo.
• $centerY: Es un parámetro obligatorio que especifica la Y o coordenada vertical / punto central del círculo.
• $radius: Es un parámetro obligatorio que especifica el radio del círculo. Esto debe ser positivo.
• $startAngle: es un parámetro obligatorio que especifica el ángulo de inicio de un arco en radianes medido desde el eje x positivo.
• $endAngle: es un parámetro obligatorio que especifica el ángulo final de un arco en radianes medido desde el eje x positivo. Por ejemplo, 2 * Math.PI para un círculo completo.
• $counterclockwise: es un parámetro opcional que especifica un valor booleano que indica cómo se dibujará un círculo en sentido horario o antihorario. El valor predeterminado es false.

Pasos para dibujar un círculo usando JavaScript Canvas

Código de ejemplo:

<canvas id="myCanvas" width="500" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
</script> 

Producción: