Dibujando en el #Canvas de #HTML5

Ahora que ya tenemos las bases para detectar si nuestro navegador soporta el canvas de HTML5 y las primeras formas de HTML5 empezaremos a trabajar haciendo nuestro primer pagina de dibujo en el canvas.

Como los comentarios dentro del código explican gran parte de las funciones, resumo, detectamos si el navegador soporta canvas, después asignamos a la función de la ventana por medio de javascript que al cargar se dibuje el canvas, dentro del cual haremos uso de las funciones fillRect y strokeRect y clearRect.

Aquí el código

Clic para ver Texto Plano
HTML:
  1. html>
  2. <head>
  3. <title>Primer dibujo en el Canvas</title>
  4.  
  5. <script>
  6. //Esta es parte de nuestra biblioteca basica para comprobar
  7. //que el navegador soporta el canvas y carga el contexto
  8.  
  9. function cargaContextoCanvas(idCanvas){
  10. var elemento = document.getElementById(idCanvas);
  11. if(elemento && elemento.getContext){
  12. var contexto = elemento.getContext('2d');
  13. if(contexto){
  14. return contexto;
  15. }
  16. }
  17. return FALSE;
  18. }
  19.  
  20. //asignamos a la funcion de windows cuando cargue que detecte que soporte el canvas
  21. //y empezamos a trabajar con el canvas
  22.  
  23. window.onload = function(){
  24. //Recibimos el contexto del elemento canvas
  25. var contexto = cargaContextoCanvas('micanvas');
  26. if(contexto){
  27. //Si lo recibimos con exito empezamos a dibujar
  28. //el relleno lo cambiamos a naranja para hacer notar la diferencia
  29. contexto.fillStyle = '#ff9900';
  30. //dibujamos un cuadrado relleno de en la posicion 50,50 de 100x100 de alto y ancho
  31. contexto.fillRect(50,50,100,100);
  32. //dibujamos un cuadrado vacio de en la posicion 100,100 de 100x100 de alto y ancho
  33. contexto.strokeRect(100,100,100,100);
  34. //borramos parte de el canvas en la posicion 75,75 de 50 x 50 de alto y ancho
  35. //quedando en la mitad del cuadro relleno y parte del vacio
  36. contexto.clearRect(75,75,50,50);
  37. }
  38. }
  39.  
  40. </script>
  41.  
  42. </head>
  43.  
  44. <body>
  45.  
  46. <canvas id="micanvas" width="200" height="200">
  47. Tu navegador no soporta canvas.
  48. </canvas>
  49.  
  50. </body>
  51. </html>

Aquí puedes ver el ejemplo funcionando

Post Relacionados :

Tags: , ,

Publicado:
22 diciembre 2010 – 14:22
Autor:
Por FeNtO
Categorías:
Comentarios:

Escribe un Comentario

Tu e-mail nunca será compartido. Los campos requeridos están marcados *

*
*