Charla sobre el uso del tag <canvas> en HTML5, y las herramientas Microsoft que nos ayudan a el desarrollo.

1. Elemento <canvas>
Julio Alfaro
Microsoft Developer Guatemala
Jalfaro.pineda@elementalgeeks.com - @guateRikum

2. Agenda
¿Qué es el elemento <canvas>
Empezando con <canvas>
¿Qué podemos hacer ?
Usando Visual Studio 2010
Ejemplo.

3. ¿Qué es el elemento <canvas>?

4. ¿Qué es el elemento <canvas>?
Es un API, que vía JavaScript permite realizar trazos y
figuras, colocar imágenes, hacer transformaciones en
el espacio asignado en la pagina HTML.

5. Empezando con <canvas>
Para entender que podemos hacer veremos un poco
de la sintaxis de JavaScript con la que podemos
realizarlas.
PASO 1 :
En el HTML debe de existir la declaracion de un canvas
<canvas width=‘300’ height=‘300’
id=‘canvasData’ />

6. Empezando con <canvas>
PASO 2:
Se debe declarar una variable de JavaScript, para
obtener la referencia del contexto del elemento
declarado en HTML (podemos ayudarnos de jQuery para
obtener dicha referencia)
var canvas;
canvas = $(‘canvasData’).getContext(‘2d’);

7. Empezando con <canvas>
PASO 3 :
A divertirse ….
Con el contexto en la variable que tiene el contexto del
canvas, podemos empezar a hacer uso del el con las
funciones que nos permiten dibujar y modificar el
canvas.

8. ¿Qué podemos hacer ?
context.beginPath() : Permite inicializar las
configuraciones del dibujo, tanto el estilo de relleno
como el del contorno.
context.drawImage(imagen, posx, posy) : Coloca la
imagen en el canvas en la posición posx y posy.
context.drawImage(imagen, posx,posy, width,
height) : permite dibujar la imagen, en la posición
posx y posy, del ancho width y altura height.

9. ¿Qué podemos hacer ?
context.fillRect(x1,y1,x2,y2) : Rellena un rectangulo
con esquina superior izquierda (x1,y1) e inferior
derecha (x2,y2)
context.strokeRect(x1,y1,x2,y2) : Al igual que la
anterior solo que no rellena el cuadro, solo dibuja el
contorno.
context.fillStyle : es la propiedad que permite
modificar la forma de llenado, que puede ser un color
o un gradiente.

10. ¿Qué podemos hacer ?
Mostrar todas las funciones y propiedades es algo que
puede tomar mucho tiempo, en esta pagina podemos
ver un ejemplo de cada una de funciones y modificarlos
para obtener lo que queremos.
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/D
efault.html

11. Usando Visual Studio 2010
Primero tenemos que instalar el SP1 de Visual Studio 2010 con lo cual
ya se encuentra soporte de HTML5.
Luego de instalarlo ya podemos abrir Visual Studio 2010 e ir a Tool->
Options -> Text Editor -> HTML -> Validation, y escoges HTML5.

12. Ejemplo
Creación de un ambiente
que permite la animación
de un sprite y moverse en
un ambiente.

13. Programming LIKE A BOSS