0
Elemento <canvas>                Julio Alfaro      Microsoft Developer GuatemalaJalfaro.pineda@elementalgeeks.com - @guate...
Agenda¿Qué es el elemento <canvas>Empezando con <canvas>¿Qué podemos hacer ?Usando Visual Studio 2010Ejemplo.
¿Qué es el elemento <canvas>?
¿Qué es el elemento <canvas>? Es un API, que vía JavaScript permite realizar trazos y figuras, colocar imágenes, hacer tra...
Empezando con <canvas>Para entender que podemos hacer veremos un pocode la sintaxis de JavaScript con la que podemosrealiz...
Empezando con <canvas>PASO 2:  Se debe declarar una variable de JavaScript, para  obtener la referencia del contexto del e...
Empezando con <canvas>PASO 3 :  A divertirse ….  Con el contexto en la variable que tiene el contexto del  canvas, podemos...
¿Qué podemos hacer ?context.beginPath() : Permite inicializar lasconfiguraciones del dibujo, tanto el estilo de rellenocom...
¿Qué podemos hacer ?context.fillRect(x1,y1,x2,y2) : Rellena un rectangulocon esquina superior izquierda (x1,y1) e inferior...
¿Qué podemos hacer ?Mostrar todas las funciones y propiedades es algo quepuede tomar mucho tiempo, en esta pagina podemosv...
Usando Visual Studio 2010Primero tenemos que instalar el SP1 de Visual Studio 2010 con lo cualya se encuentra soporte de H...
Ejemplo   Creación de un ambiente   que permite la animación   de un sprite y moverse en   un ambiente.
Programming LIKE A BOSS
Upcoming SlideShare
Loading in...5
×

Canvas

779

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Canvas"

  1. 1. Elemento <canvas> Julio Alfaro Microsoft Developer GuatemalaJalfaro.pineda@elementalgeeks.com - @guateRikum
  2. 2. Agenda¿Qué es el elemento <canvas>Empezando con <canvas>¿Qué podemos hacer ?Usando Visual Studio 2010Ejemplo.
  3. 3. ¿Qué es el elemento <canvas>?
  4. 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. 5. Empezando con <canvas>Para entender que podemos hacer veremos un pocode la sintaxis de JavaScript con la que podemosrealizarlas.PASO 1 : En el HTML debe de existir la declaracion de un canvas<canvas width=‘300’ height=‘300’id=‘canvasData’ />
  6. 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. 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. 8. ¿Qué podemos hacer ?context.beginPath() : Permite inicializar lasconfiguraciones del dibujo, tanto el estilo de rellenocomo el del contorno.context.drawImage(imagen, posx, posy) : Coloca laimagen en el canvas en la posición posx y posy.context.drawImage(imagen, posx,posy, width,height) : permite dibujar la imagen, en la posiciónposx y posy, del ancho width y altura height.
  9. 9. ¿Qué podemos hacer ?context.fillRect(x1,y1,x2,y2) : Rellena un rectangulocon esquina superior izquierda (x1,y1) e inferiorderecha (x2,y2)context.strokeRect(x1,y1,x2,y2) : Al igual que laanterior solo que no rellena el cuadro, solo dibuja elcontorno.context.fillStyle : es la propiedad que permitemodificar la forma de llenado, que puede ser un coloro un gradiente.
  10. 10. ¿Qué podemos hacer ?Mostrar todas las funciones y propiedades es algo quepuede tomar mucho tiempo, en esta pagina podemosver un ejemplo de cada una de funciones y modificarlospara obtener lo que queremos.http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
  11. 11. Usando Visual Studio 2010Primero tenemos que instalar el SP1 de Visual Studio 2010 con lo cualya 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. 12. Ejemplo Creación de un ambiente que permite la animación de un sprite y moverse en un ambiente.
  13. 13. Programming LIKE A BOSS
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×