Aros Olímpicos con Canvas y HTML5

05/Ago/2012 HTML5 , , 1 Comentario


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…


Su navegador no soporta en elemento CANVAS 

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.

Un comentario en “Aros Olímpicos con Canvas y HTML5”

Víctor Cuervo

Profesor Bru

Me lo podeis pasar completo porfavor para copiarlo directamente y que me funcione para mis alumnos

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.