Post on 12-Jun-2015
1
10410526-Roberto Carlos Payan Robles
10410568-Jesús Guerrero Vargas García
Canvas
7/02/2014
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
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
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
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
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
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
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
• 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
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
Utilidad
• Abre la web al mercado de videojuegos, diseño y animación.
12
Creación de un canvas
• <canvas id= " primerCanvas" width="200" height="100" </canvas>
• Por default canvas no tiene borde ni contenido.
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
Personalización• <canvas id= "primerCanvas" width="800" height="200"
style="border:3px solid #0000ff;">• Tu navegador no soporta el elemento canvas• </canvas>
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
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
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
Agregar texto• ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
ctx.font = "30px Arial";ctx.strokeText("Hello World",10,50);
19
Agregar imagen• var img = document.getElementById("imagen");
ctx.drawImage(img,10,10);
20
Ejemplos practicos• Juego:• http://www.scirra.com/arcade/shooter/349/project-blaze-
zero
21
• Animación interactiva• http://lab.djordjeungar.com/experiment/gearworks
22
• Recreación de imágenes con gusanos• http://html5-pro.com/wormz/
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
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-sirve-una-api.
• 2. S.L., intelligenia. http://www.slideshare.net/. [Online] http://www.slideshare.net/intelligenia/introduccin-al-elemento-canvas-de-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-los-usuarios/.
• 5. www.designer-daily.com. [Online] http://www.designer-daily.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.
•