Elemento <canvas>Julio Alfaro

Microsoft Developer GuatemalaJalfaro.pineda@elementalgeeks.com - @guateRikum

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

Agenda

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

¿Qué es el elemento <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’ />

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’);

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.

Empezando con <canvas>

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.

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

¿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/Default.html

¿Qué podemos hacer ?

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.

Usando Visual Studio 2010

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

Ejemplo

Programming LIKE A BOSS