Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Canvas

1,115 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 Canvas

  1. 1. 1 Canvas 10410526-Roberto Carlos Payan Robles 10410568-Jesús Guerrero Vargas García 7/02/2014
  2. 2. 2 AGENDA • ¿Qué es HTML5? • ¿Qué es API? • ¿Qué es canvas? • Características de canvas • Canvas vs Flash • Utilidad canvas • Creación de canvas • Ejemplos prácticos • Conclusiones
  3. 3. 3 HTML5 • Ultima revisión del lenguaje HTML • La versión anterior se libero en 1999 • Diseñado para proporcionar un basto contenido sin necesidad de plug-ins
  4. 4. 4 API • Interfaz de programación de aplicaciones • Especificación utilizada por componentes de software para comunicarse entre si • Ejemplos: • Google Maps • Facebook • Twitter • Paypal
  5. 5. 5 Canvas • Desarrollado por Apple para Safari • Estandarizado por HTML5 por el grupo WHATWG • Permite crear imágenes dinámicas • Lienzo en blanco donde podemos «pintar» • Permite hacer imágenes como en flash pero sin plug-ins externos • La magia la realiza Javascript
  6. 6. 6 Características de canvas • Elemento nuevo en HTML5 • Soportado por los navegadores: • Internet explorer 9+, Mozilla Firefox, Opera, Google Chrome, Safari • Permite crear aplicaciones, y una generación de juegos web • Permite trabajar en contexto 2D o 3D • Permite trabajar con formas simples o de gran complejidad
  7. 7. 7 Características de canvas • Interacción del usuario • Texto o imagen alternativos • Puede emplear imágenes de diferentes tipos en su interior como JEPG hasta SVG
  8. 8. 8 Canvas vs Flash Flash • Ventajas • Animaciones y gráficos de la web dominados por flash • Mas fácil de trabajar con flash por el entorno de diseño grafico. • Propiedad de la empresa Adobe • Permite la elaboración de juegos complejos • Mas eficiente a la hora de crear gráficos de varias resoluciones
  9. 9. 9 • Desventajas • Necesita muchos recursos para ejecutarse en móviles • Flash requiere un plug-in en el navegador • Necesita licencia • Los navegadores lo están descontinuando.
  10. 10. 10 Canvas vs Flash Canvas • Ventajas • Cualquier navegador moderno debe ser capaz de • • • • soportarlo Navegadores modernos no contienen plug-in de Flash Carga los gráficos mas rápido Es libre y abierto Aparición de frameworks para canvas
  11. 11. 11 Utilidad • Abre la web al mercado de videojuegos, diseño y animación.
  12. 12. 12 Creación de un canvas • <canvas id= " primerCanvas" width="200" height="100" </canvas> • Por default canvas no tiene borde ni contenido.
  13. 13. 13 Dando estilo al canvas • Para agregar un borde se le agrega el atributo Style: • <canvas id= "primerCanvas" width="200" height="100" style="border:1px solid #000000;"> • Tu navegador no soporta el elemento canvas. • </canvas>
  14. 14. 14 Personalización • <canvas id= "primerCanvas" width="800" height="200" style="border:3px solid #0000ff;"> • Tu navegador no soporta el elemento canvas • </canvas>
  15. 15. 15 Dibujando en el canvas con javascript • Con el siguiente script: • <script> var c = document.getElementById("primerCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FFFF00"; ctx.fillRect(0,0,150,75); </script>
  16. 16. 16 var c = document.getElementById("primerCanvas"); Encuentra el elemento canvas con el nombre var ctx = c.getContext("2d"); Obtiene el contexto ctx.fillStyle = "#FFFF00"; ctx.fillRect(0,0,150,75); Dibujan rectangulo amarillo donde fillRect(x,y,ancho,alto)
  17. 17. 17 Dibujar una linea • <script> var c = document.getElementById("primerCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script>
  18. 18. 18 Agregar texto • ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50);
  19. 19. 19 Agregar imagen • var img = document.getElementById("imagen"); ctx.drawImage(img,10,10);
  20. 20. 20 Ejemplos practicos • Juego: • http://www.scirra.com/arcade/shooter/349/project-blaze- zero
  21. 21. 21 • Animación interactiva • http://lab.djordjeungar.com/experiment/gearworks
  22. 22. 22 • Recreación de imágenes con gusanos • http://html5-pro.com/wormz/
  23. 23. 23 Conclusiones • Conclusiones generales: Canvas es un elemento HTML5 que poco a poco va tomando fuerza en el ámbito de gráficos, juegos y animaciones compitiendo directamente con Flash forzando así a mejorar las tecnologías. Canvas brinda bastante flexibilidad, lo único que limita es la imaginación. • Contratiempos: no se presentaron • Opinión acerca de la dificultad de la actividad y el tiempo y formato de entrega: La actividad se logró fácilmente y el tiempo fue optimo ya que se contaba con conocimientos básicos de materias previas. El formato de entrega fue bien elegido ya que una presentación te obliga a tener cierto dominio sobre el tema. • Tiempo aproximado de la realización: 15 horas
  24. 24. 24 Referencias • 1. www.ddw.com.a. [Online] http://www.ddw.com.ar/blog/tecnologia- • • • • • • software-aplicaciones-y-servicios-web/331-que-es-y-para-que-sirveuna-api. 2. S.L., intelligenia. http://www.slideshare.net/. [Online] http://www.slideshare.net/intelligenia/introduccin-al-elemento-canvasde-html5. 3. www.aulaclic.es. [Online] http://www.aulaclic.es/articulos/canvas_1.html. 4. Gomiz, Hector. http://blog.eltallerdigital.com. [Online] http://blog.eltallerdigital.com/2012/05/5-ventajas-de-html5-para-losusuarios/. 5. www.designer-daily.com. [Online] http://www.designerdaily.com/10-cool-html5-games-and-how-to-create-your-own-23820. 6. W3C. www.w3schools.com. [Online] http://www.w3schools.com/html/html5_intro.asp.

×