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...

  1. <canvas height="300px" width="600px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>
  3.  
  4. var canvas = document.getElementById("micanvas");
  5. var ctx = canvas.getContext("2d");
  6. </script>

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:

  1. // Azul
  2. ctx.beginPath();
  3. ctx.arc(60,60,50,0,(Math.PI/180)*360,true);
  4. ctx.fillStyle="rgba(255,255,0,0)";
  5. ctx.fill();
  6. ctx.lineWidth = 10;
  7. ctx.strokeStyle = "rgb(0,129,188)";
  8. ctx.stroke();
  9.  
  10. // Negro
  11. ctx.beginPath();
  12. ctx.moveTo(230,60);
  13. ctx.arc(180,60,50,0,(Math.PI/180)*360,true);
  14. ctx.fillStyle="rgba(255,255,0,0)";
  15. ctx.fill();
  16. ctx.lineWidth = 10;
  17. ctx.strokeStyle = "rgb(35,34,35)";
  18. ctx.stroke();
  19.  
  20. // Rojo
  21. ctx.beginPath();
  22. ctx.moveTo(350,60);
  23. ctx.arc(300,60,50,0,(Math.PI/180)*360,true);
  24. ctx.fillStyle="rgba(255,255,0,0)";
  25. ctx.fill();
  26. ctx.lineWidth = 10;
  27. ctx.strokeStyle = "rgb(238,50,78)";
  28. 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.

  1. ctx.fillStyle="rgba(255,255,0,0)";

El círculo completo lo obtenemos dibujando un arco de 0 a 360 grados.

  1. 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:

  1. // Amarillo
  2. ctx.beginPath();
  3. // Arco derecha
  4. ctx.moveTo(170,100);
  5. ctx.arc(120,100,50,0,(Math.PI/180)*265,true);
  6. // Arco izquierda
  7. ctx.moveTo(90,60);
  8. ctx.arc(120,100,50,(Math.PI/180)*248,(Math.PI/180)*20,true);
  9. ctx.fillStyle="rgba(255,255,0,0)";
  10. ctx.fill();
  11. ctx.lineWidth = 10;
  12. ctx.strokeStyle = "rgb(252,177,49)";
  13. ctx.stroke();
  14.  
  15.  
  16. // Verde
  17. ctx.beginPath();
  18. //Arco derecha
  19. ctx.moveTo(290,100);
  20. ctx.arc(240,100,50,0,(Math.PI/180)*265,true);
  21. // Arco izquierda
  22. ctx.moveTo(210,60);
  23. ctx.arc(240,100,50,(Math.PI/180)*248,(Math.PI/180)*20,true);
  24. ctx.fillStyle="rgba(255,255,0,0)";
  25. ctx.fill();
  26. ctx.lineWidth = 10;
  27. ctx.strokeStyle = "rgb(0,157,87)";
  28. 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.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

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

*

*