Ejemplos varios de canvas (html5)

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:

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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s