Con esto de estar en plenas Olimpiadas de Londres 2012 y explicando ejemplos de uso de círculos en HTML5, se me ocurrió explicar el uso del Canvas y del HTML5 para recrear los aros olímpicos.
Veamos lo sencillo que es crear los aros olímpicos con el elemento Canvas y HTML5. Una vez que tenemos nuestro Canvas dentro de la página y una referencia a él…
Nos vamos a dedicar a describir los círculos de la parte superior. El azul, negro y rojo. Tal y como vimos en el ejemplo de Dibujar un círculo sobre el Canvas de HTML5 lo que tenemos que hacer es jugar con la función .arc().
Los tres círculos superiores los describiríamos de la siguiente forma:
// Azul
ctx.beginPath();
ctx.arc(60,60,50,0,(Math.PI/180)*360,true);
ctx.fillStyle="rgba(255,255,0,0)";
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0,129,188)";
ctx.stroke();
// Negro
ctx.beginPath();
ctx.moveTo(230,60);
ctx.arc(180,60,50,0,(Math.PI/180)*360,true);
ctx.fillStyle="rgba(255,255,0,0)";
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(35,34,35)";
ctx.stroke();
// Rojo
ctx.beginPath();
ctx.moveTo(350,60);
ctx.arc(300,60,50,0,(Math.PI/180)*360,true);
ctx.fillStyle="rgba(255,255,0,0)";
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(238,50,78)";
ctx.stroke();
En este código podemos ver cosas muy interesantes. La primera es que para cada círculo las secuencias de pintado empiezan con un .beginPath() y terminan con un .stroke(). Si no hacemos esto, se aplicará la última configuración indicada.
El color del aro lo hacemos mediante el borde y sus propiedades .strokeStyle y .lineWidth.
Importante es el relleno del circulo. Y es que en verdad el círculo no tiene relleno. Tiene un interior transparente, ya que los aros se entrelazan entre si. Es por ello que recurrimos a la función rgba, cuyo último parámetro es la transparencia del color. En este caso, aplicamos una transparencia total, es decir 0.
ctx.fillStyle="rgba(255,255,0,0)";
El círculo completo lo obtenemos dibujando un arco de 0 a 360 grados.
ctx.arc(300,60,50,0,(Math.PI/180)*360,true);
Una vez que tenemos los circulos superiores vamos a por los inferiores. A por el amarillo y el verde. En este caso vemos que tienen el efecto de entrelazado, y es por ello que vemos que no son dos círculos enteros, si no que son dos arcos. Si bien, para nuestro uso del Canvas y del HTML5 no será un problema, ya que pintamos arcos y no círculos.
Por lo tanto para los aros inferiores vamos dibujar dos arcos. El primero será el de la derecha que irá del ángulo 0 al 265 y el segundo el de la izquierda que irá del ángulo 248 al angulo 20.
El código será el siguiente:
// Amarillo
ctx.beginPath();
// Arco derecha
ctx.moveTo(170,100);
ctx.arc(120,100,50,0,(Math.PI/180)*265,true);
// Arco izquierda
ctx.moveTo(90,60);
ctx.arc(120,100,50,(Math.PI/180)*248,(Math.PI/180)*20,true);
ctx.fillStyle="rgba(255,255,0,0)";
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(252,177,49)";
ctx.stroke();
// Verde
ctx.beginPath();
//Arco derecha
ctx.moveTo(290,100);
ctx.arc(240,100,50,0,(Math.PI/180)*265,true);
// Arco izquierda
ctx.moveTo(210,60);
ctx.arc(240,100,50,(Math.PI/180)*248,(Math.PI/180)*20,true);
ctx.fillStyle="rgba(255,255,0,0)";
ctx.fill();
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0,157,87)";
ctx.stroke();
El resto de técnicas serán las mismas que para los aros de la parte superior. Con este sencillo código tenemos creados nuestros aros olímpicos con Canvas y HTML5.
