Canvas
-
Upload
julio-alfaro -
Category
Documents
-
view
1.139 -
download
0
description
Transcript of Canvas
![Page 2: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/2.jpg)
¿Qué es el elemento <canvas> Empezando con <canvas> ¿Qué podemos hacer ? Usando Visual Studio 2010 Ejemplo.
Agenda
![Page 3: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/3.jpg)
¿Qué es el elemento <canvas>?
![Page 4: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/4.jpg)
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>?
![Page 5: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/5.jpg)
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>
![Page 6: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/6.jpg)
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>
![Page 7: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/7.jpg)
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>
![Page 8: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/8.jpg)
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 ?
![Page 9: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/9.jpg)
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 ?
![Page 10: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/10.jpg)
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 ?
![Page 11: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/11.jpg)
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
![Page 12: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/12.jpg)
Creación de un ambiente que permite la animación de un sprite y moverse en un ambiente.
Ejemplo
![Page 13: Canvas](https://reader033.fdocuments.es/reader033/viewer/2022061201/5479a6d8b4af9f39168b46f0/html5/thumbnails/13.jpg)
Programming LIKE A BOSS