1. Nombre y nmero de control:Normando Senz Vera - 10410578Luis Federico Carrillo Ayala 10410520Fecha de entrega:02 de Septiembre 20141Tema: Canvas HTML5

2. Agenda2 Marco conceptual. Caractersticas principales. Utilidad y beneficios. Ejemplos de canvas. Conclusiones. Referencias 3. Resultados3 4. 4Introduccin:Canvas es un elemento HTML incorporadoen HTML5 que permite la generacin de grficosdinmicamente por medio del scripting. Fue implementado por Apple para sunavegador Safari. 5. 5 Permite generar grficos estticos y animaciones. Puede ser accedido a travs de JavaScript,permitiendo generar grficos 2D, juegos,animaciones y composicin de imgenes. 6. 6 Hay dos posibles contextos, "2d" para dibujar en dosdimensiones y "webgl" para dibujar en tresdimensiones. Una vez tenemos el objeto contexto ya podemosutilizar todos las funciones y propiedades que tieneasociados para dibujar. 7. 7 8. 8InteractividadSe puede responder a lasacciones del usuarioescuchando eventos de teclado,ratn o tctiles. 9. 9AnimacinCada objeto dibujado en elcanvas puede ser animado. 10. 10FlexibilidadPuede mostrar lneas, formas,texto, imgenes, etc., con o sinanimacin. 11. 11Soporte delnavegador/plataformaCanvas puede acceder a unaamplia gama de dispositivos. 12. 12PopularidadNo hay escasez de los recursosdisponibles. 13. 13Es un estndar webLos desarrolladores puedenestar seguros de que el canvasestar disponible por muchotiempo. 14. 14Desarrolla una vez,ejecuta en todaspartesCanvas ofrece una granportabilidad. 15. 15Herramientasgratuitas y accesiblesde desarrolloSlo un navegador y un bueneditor de cdigo. 16. 16 17. 17 18. 18Juegos:Es un candidato ideal para laproduccin de todo tipo dejuegos en 2D y 3D. 19. 19Publicidad:Tiene todas las caractersticasnecesarias para atraer laatencin de los compradores. 20. 20Representacin deDatos:HTML5 puede recoger datos defuentes de datos globales yusarlo para generar grficosvisualmente atractivos einteractivos y tablas. 21. 21Educacin yFormacin:Se pueden utilizar para producirexperiencias de aprendizajeeficaces y atractivos, lacombinacin de texto,imgenes, videos y audio. 22. 22Arte y Decoracin:Una amplia variedad de tela decolores, gradientes, patrones,transparencia, sombras ycaractersticas de recorte, todotipo de grficos artsticos ydecorativos se pueden extraer. 23. 23 24. Ejemplo 124 En el siguiente ejemplo mostraremos como se dibuja una lnea enun canvas mediante JavaScript. 25. Ejemplos25 El cdigo interpretado quedara de la siguiente manera. 26. Ejemplos.26 En el siguiente cdigo se muestra como graficar unos rectngulos,darles transparencia y una funcin con los eventos del canvas. Aquse presenta el cdigo dnde se crea el canvas. 27. Ejemplos.27 Siguiendo el ejemplo anterior, aqu se muestra nuestro scriptdnde se le da una funcin al canvas, cuando se da un clicksobre su superficie. 28. Ejemplos28 Aqu se muestra el cdigo interpretado, antes de hacer click en elcanvas. 29. Ejemplos29 Luego de hacer click sobre el canvas, el cambiosera el siguiente: 30. Ejemplos30 A continuacin mostraremos un ejemplo de como usaruna imagen en un canvas. 31. Ejemplos.31 La imagen cargada en el canvas se vera de lasiguiente manera: 32. 32Conclusiones Conclusiones generales acerca de loaprendidoEl elemento canvas es sin duda una de lasvariaciones mas importantes de HTML5 conrespecto a sus versiones anteriores, la grancantidad de cosas que pueden crearse dentrode l es de gran magnitud, as que el manejode ste elemento requiere de unconocimiento avanzado del mismo y de sufuncionamiento. De esta manera se le podrsacar todo el provecho posible y podremosdisfrutar de la gran gama de funciones ygrficos presentados por canvas. 33. 33 Contratiempos presentados al realizarla actividad.El nico contratiempo ocurrido fue que nuestrosconocimientos limitados en JavaScript no nospermitan trabajar adecuadamente el canvas, ya queste elemento se maneja bsicamente con stelenguaje o con algn otro lenguaje script 34. 34 Opinin acerca de la dificultad de laactividad, el tiempo y el formato deentrega.Tiempo suficiente para elaborar la presentacin yverificar los ejemplos de este elemento y sufuncionamiento.Tiempo de realizacin(en horas).El tiempo aproximado fue de 8 horas, dividas en 4das de trabajo 35. 35Referencias http://www.genbetadev.com/desarrollo-web/introduccion-al-elemento-canvas-de-html5 http://www.elwebmaster.com/general/introduccion-html5-canvas http://es.wikipedia.org/wiki/Canvas_(HTML) https://developer.mozilla.org/en-US/docs/Web/WebGL/Getting_started_with_WebGL http://www.w3schools.com/html/html5_canvas.asp