24
10410526-Roberto Carlos Payan Robles 10410568-Jesús Guerrero Vargas García 1 Canvas 7/02/2014

HTML5 Canvas

Embed Size (px)

Citation preview

Page 1: HTML5 Canvas

1

10410526-Roberto Carlos Payan Robles

10410568-Jesús Guerrero Vargas García

Canvas

7/02/2014

Page 2: HTML5 Canvas

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

Page 3: HTML5 Canvas

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

Page 4: HTML5 Canvas

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

Page 5: HTML5 Canvas

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

Page 6: HTML5 Canvas

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

Page 7: HTML5 Canvas

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

Page 8: HTML5 Canvas

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

Page 9: HTML5 Canvas

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.

Page 10: HTML5 Canvas

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

Page 11: HTML5 Canvas

11

Utilidad

• Abre la web al mercado de videojuegos, diseño y animación.

Page 12: HTML5 Canvas

12

Creación de un canvas

• <canvas id= " primerCanvas" width="200" height="100" </canvas>

• Por default canvas no tiene borde ni contenido.

Page 13: HTML5 Canvas

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>

Page 14: HTML5 Canvas

14

Personalización• <canvas id= "primerCanvas" width="800" height="200"

style="border:3px solid #0000ff;">• Tu navegador no soporta el elemento canvas• </canvas>

Page 15: HTML5 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>

Page 16: HTML5 Canvas

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) 

Page 17: HTML5 Canvas

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>

Page 18: HTML5 Canvas

18

Agregar texto• ctx.font = "30px Arial";

ctx.fillText("Hello World",10,50);

ctx.font = "30px Arial";ctx.strokeText("Hello World",10,50);

Page 19: HTML5 Canvas

19

Agregar imagen• var img = document.getElementById("imagen");

ctx.drawImage(img,10,10);

Page 20: HTML5 Canvas

20

Ejemplos practicos• Juego:• http://www.scirra.com/arcade/shooter/349/project-blaze-

zero

Page 21: HTML5 Canvas

21

• Animación interactiva• http://lab.djordjeungar.com/experiment/gearworks

Page 22: HTML5 Canvas

22

• Recreación de imágenes con gusanos• http://html5-pro.com/wormz/

Page 23: HTML5 Canvas

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

Page 24: HTML5 Canvas

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.

•