En este post vamos a ver el uso de la función arc del contexto en un Canvas para poder dibujar círculos usando JavaScript.

Esta función permitirá dibujar un círculo completo o un medio círculo.

Función arc en contexto de canvas en JavaScript

La sintaxis de la función arc es la siguiente:

contexto.arc(x, y, radio, anguloInicio, anguloFin);

• Los primeros argumentos indican las coordenadas del centro del círculo.
• El radio indica el radio del círculo.
• Los últimos argumentos indican el ángulo de inicio y de fin; para un círculo completo el ángulo de inicio debería ser 0 y el ángulo de fin debería ser Math.PI * 2.

Nota: arc acepta un último parámetro booleano opcional que indica si su dirección debería ir al contrario de las manecillas del reloj; por defecto es false. Esto se ve de mejor manera cuando no se hace un círculo completo.

Estilos

El color de relleno se define con fillStyle, y el color de trazo se define con strokeStyle. Los colores pueden ser indicados por nombre o con un valor hexadecimal.

Dibujar círculo con JavaScript

Basta de charlas y veamos el código que dibuja un círculo en un canvas usando JavaScript:

See the gist on github.

Puedes probar el código aquí.

Medio círculo con JavaScript

Para dibujar la mitad de un círculo se puede usar igualmente la función arc. Solo hay que modificar el ángulo de inicio.

El código que dibuja medio círculo en JavaScript es el siguiente:

See the gist on github.

Si te fijas, solo cambia el ángulo inicio de 0 a Math.PI.

Prueba el ejemplo aquí.