Canvas
Upcoming SlideShare
Loading in...5
×
 

Canvas

on

  • 1,064 views

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

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

Statistics

Views

Total Views
1,064
Views on SlideShare
1,064
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Canvas Canvas Presentation Transcript

  • Elemento <canvas> Julio Alfaro Microsoft Developer GuatemalaJalfaro.pineda@elementalgeeks.com - @guateRikum
  • 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 transformaciones en el espacio asignado en la pagina HTML.
  • 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’ />
  • 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.
  • ¿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.
  • ¿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.
  • ¿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
  • 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.
  • Ejemplo Creación de un ambiente que permite la animación de un sprite y moverse en un ambiente.
  • Programming LIKE A BOSS