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