> Manuales > Manual de Canvas del HTML 5

Cómo dibujar arcos, para hacer curvas basadas en circunferencias o segmentos de ellas, en el lienzo de los elementos Canvas del HTML 5.

En este artículo explicaremos cómo hacer caminos con arcos. Los arcos son segmentos de circunferencias, o una circunferencia entera, en el caso de un arco completo. Son uno de los modos de hacer curvas en el elemento Canvas del HTML 5.

El método que podemos dibujar para hacer un arco es arc(), que invocamos sobre el objeto el contexto del canvas. Este método requiere unos cuantos parámetros para poder invocarlo y especificar las características del arco que se desea hacer y lo cierto es que no resulta del todo trivial porque hay que conocer algunas fórmulas matemáticas para el trabajo con circunferencias. Así que tendremos que refrescar algunos conocimientos que pueden haberse olvidado del periodo de enseñanza media.

Nota: Igual que los caminos, una vez creados, podemos decidir si queremos rellenarlos de color, mediante el método fill() o bien dibujar solamente el contorno, con el método stroke(). Todas estas cosas sobre caminos y demás se pueden aprender en el Manual del trabajo con Canvas.

Estos son los parámetros que debemos enviar al método arc():

arc(x, y, radio, angulo_inicio, angulo_final, sentido_contrario_del_reloj)

La verdad es que todos los parámetros son bastante sencillos de entender, pero el ángulo de inicio y fin no se indican en grados, como podríamos suponer, sino en radianes. Para el que no se acuerde, se puede hacer un paso de grados a radianes atendiendo a la siguiente fórmula:

Radianes = número_PI x (grados/180)

Para convertir grados en radianes podríamos utilizar la siguiente línea de código Javascript:

var radians = (Math.PI/180)*degrees
Nota: Math.PI es el famoso número PI (3.1416). En Javascript, a partir de la clase Math, tenemos acceso a esa constante, así como diversas funcines matemáticas. Ver las notas sobre la clase Math.

Entender los radianes

Para comprender los gradianes de una manera más visual, así como la referencia sobre el eje X, que serían los cero grados, se puede ver la siguiente imagen:

En la imagen anterior tenemos varios valores de radianes:

Así pues, para hacer un círculo completo con centro en (50, 50) de 20 píxeles de radio, podríamos utilizar un código como este:

contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, false);

Como se puede ver, la circunferencia empieza en 0 PI (cero) y termina en 2 PI.

Ejemplo de dibujo de caminos con arcos

Para que se pueda entender el método con el que se crean caminos complejos a base de arcos en el elemento Canvas, vamos a presentar el siguiente ejemplo, en el que crearemos este sencillo diseño.

En realidad aunque parezca una figura un poco compleja de hacer, se consigue con dos caminos. El primer camino se rellena con color negro y el segundo con color naranja. En la siguiente imagen se puede ver de una manera más clara los caminos que habría en para hacer ese diseño.

El primer camino tiene dos arcos concéntricos, uno con radio mayor y el segundo con un radio menor. Este primer camino comienza en el radio mayor y se puede ver una línea gris que hemos puesto, con unas flechas, para poder reconocer la dirección que lleva el camino.

Veamos el código para hacer este diseño.

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   //primer camino, en negro
   ctx.beginPath();
   ctx.arc(75,75,60,Math.PI,Math.PI*0.5,false);
   ctx.arc(75,75,32,Math.PI*0.5,Math.PI*1,false);
   ctx.closePath()
   ctx.fill();

   //segundo camino, en naranja
   ctx.fillStyle = '#ff8800';
   ctx.beginPath();
   ctx.arc(75,75,15,0,Math.PI*2,false);
   ctx.fill();
}

Recordar que este código es parcial, puesto que las partes que faltarían para completarlo, como la función cargaContextoCanvas() o el HTML del elemento canvas, ya las conocemos de diversos artículos anteriores del Manual de Canvas.

De todos modos podéis ver el código fuente del ejercicio, que se puede ver en marcha de una página aparte.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual