En el siguiente ejemplo vamos a ver como podemos dibujar un círculo sobre un Canvas de HTML5. La realidad es que dentro de la especificación del Canvas de HTML5 no existe ningún método que nos dibuje un círculo directamente, si no, que nos ofrece un método que dibuja arcos. Y por definición un círculo no deja de ser un arco de 360º.
Así tenemos que conocer en profundidad la función .arc(), con la cual vamos a dibujar nuestro círculo sobre el Canvas. La sintaxis de este método sería:
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise Optional );
Echándole un vistazo por encima lo que vemos es que podemos dibujar un arco en unas coordenadas (x,y), cuyo radio será el del valor del radius y tendrá un angulo de inicio y otro de fin.
Nos vamos a detener en estos dos valores y es que los valores de los ángulos hay que expresarlos en radianes. Así que, tendremos que desempolvar nuestros conocimientos de trigonometría y recordar que:
180 grados = π radianes
Por lo tanto, si queremos trabajar con grados, tendremos que utilizar la siguiente ecuación:
(π/180)*grados
Si queremos especificar 90º:
(π/180)*90
Una vez aprendido esto revisemos el último parámetro. Que es el anticlockwise. Es decir, si queremos trazar el arco el la dirección de las agujas del reloj, le damos un valor de false, si queremos al revés que la dirección de las agujas, pues le damos true.
Para pintar nuestro primer arco, vamos a crear uno que vaya del 0 a 270 grados.
ctx.arc(100,70,50,0,(Math.PI/180)*270,true);
O que sea medio círculo, del 0 al 180:
ctx.arc(230,70,50,0,(Math.PI/180)*180,true);
Y para dibujar un círculo completo en el Canvas tendríamos que ir del 0 al 360. De la siguiente forma:
ctx.arc(360,70,50,0,(Math.PI/180)*360,true);
Ya solo nos queda saber dos cosas. La primera es cómo indicar el color del relleno del círculo. Esto lo hacemos con la propiedad .fillStyle y siempre ejecutando el método .fill() Ya que si no, no se ejecutara el pintado del relleno.
ctx.arc(360,70,50,0,(Math.PI/180)*360,true);
ctx.fillStyle="#f99";
ctx.fill();
Y si queremos poner un borde al círculo tenemos las propiedades .strokeStyle y .lineWidth. En la primera le damos el color al borde mediante un formato RGB y la segunda, en pixels, indicamos el ancho del borde.
ctx.arc(360,70,50,0,(Math.PI/180)*360,true);
ctx.strokeStyle = "#f00";
ctx.lineWidth = 10;
ctx.stroke();
Lo último que haremos, será ejecutar la función .stroke() que sin ella no se volcará nada de contenido al Canvas.
Así ya tenemos dibujado nuestro círculo sobre un Canvas de HTML5. Bueno, y algunos arcos también. :-D
