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

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
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
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
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
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
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
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
• 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
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
Utilidad
• Abre la web al mercado de videojuegos,
diseño y animación.

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
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
Personalización
• <canvas id= "primerCanvas" width="800" height="200"
style="border:3px solid #0000ff;">
• Tu navegador no soporta el elemento canvas
• </canvas>

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
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
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
Agregar texto
• ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

19. 19
Agregar imagen
• var img = document.getElementById("imagen");
ctx.drawImage(img,10,10);

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

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

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

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
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.