Canvas es, probablemente, el elemento más potente de HTML5. Mayormente nos da una funcionalidad similar a las animaciones flash en una parte de la pantalla, pero utilizando javascript. En principio es para un contexto 2D pero ya hay una librería (three.js) que te permite utilizar gráficos 3D (de momento no soportada por todos los navegadores). En los primeros manuales de HTML5 que cayeron en mis manos este elemento venía muy mal explicado, te decían que se podía «dibujar» usando javascript… y ale, vía.
Para utilizar canvas en tu web debes incluir una etiqueta canvas, que por defecto será invisible y tendrá un tamaño de 300*150 px. Luego, en javascript, debes inicializar un contexto tal que así:
var ctx = document.querySelector('canvas').getContext('2d');
Tras haber definido un contexto bidimensional, podemos empezar a dibujar. El API da la posibilidad de utilizar rectángulos, arcos, círculos… El siguiente código dibujaría un rectángulo, con un reborde más oscuro:
ctx.fillStyle='rgb(0, 255, 0)'; ctx.fillRect(10,20,50,50); ctx.strokeStyle='rgb(0,182,0)' ctx.lineWidth=5; ctx.strokeRect(9,19,52,52);
En fin, esto es lo más básico, pero tienes múltiples opciones: degradados, imágenes complejas, animaciones, interactividad… En lugar de currarme un tutorial más complejo te remito a varios enlaces para que veas la pontencia de Canvas:
- Un vídeo de cómo hacer el juego del «snake» y una página con el código fuente y un ejemplo de dicho juego
- Una versión del juego FreeRider hecha en con canvas y html5
- Varios ejemplos desarrollados por Adobe sobre HTML5 y css3.
- Un manual de la página DesarrolloWeb
- Un tuturial de animaciones básicas en la web de desarrolladores de Mozilla
- Y un último ejemplo que simula un entorno para un shooter bastante logrado
Bueno, con estos ejemplos ya puedes ver más o menos la potencia de este elemento y tener varios tutoriales para iniciarte en la creación de aplicaciones con canvas.
DonnierocK 