Archivo
Que es HTML5 Canvas, tutorial de animación básica.
Hasta hace poco, dibujar con javascript en el navegador no era nada fácil y la interactividad era muy limitada, para hacer estas funciones usábamos extensiones como flash o silverlight, que si bien son herramientas fantásticas para solventar las muchas limitantes de los navegadores, están atrapadas en una caja y no se integran muy bien con el resto de las tecnologías web (HTML, DOM, CSS). Pero ahora con canvas de html5, al menos en la parte de dibujo, la extensión ya no es necesaria.
«Flash es una extensión de la Web, si la Web tiene las características que la extensión ofrece, la extensión ya no es necesaria», mrdoob.
El elemento <canvas> de HTML5 es la solución de la web para dibujar o trabajar con imágenes pixel por pixel y se integra perfectamente en el documento, se le puede dar estilo por medio de CSS y se puede programar por medio de javascript. No es una extensión es parte de la web.
Se puede pensar en el <canvas> como una etiqueta <image> programable, en lugar de dar la ruta de donde se encuentra el archivo fuente de la imagen, se puede dibujar la imagen directamente por medio del API de javascript. Es un elemento de mapa de bits que se puede usar para renderizar gráficos, juegos u otras imágenes visuales sobre la marcha.
El elemento canvas tiene dos atributos que controlan el tamaño, al igual que algunos elementos html, estos atributos son el ancho (width) y el alto (height). Cuando son especificados, deben tener valores enteros positivos. Si un atributo falta, se usan los valores por defecto, para el ancho es de 300 y para el alto es de 150, los valores son especificados en pixeles, sin embargo se puede dimensionar arbitrariamente usando una hoja de estilo CSS.
El proceso general para trabajar con canvas, es poner la etiqueta <canvas> dentro del <body> del documento, especificar un id, el ancho y el alto como atributos de la etiqueta, después, por medio de javascript se crea un manejador para el canvas y se obtiene lo que se llama un contexto (context). El contexto es el objeto que tiene el API para dibujar sobre el canvas.
El primer argumento al obtener el contexto especifica el tipo de API con el que se desea programar, los demás argumentos son manejados por esa API.
Hasta el momento la especificación de canvas soporta 2 contextos «2d» y «webgl» (que es soportada por webkit y firefox), lo que abre la posibilidad de dibujo 3d en el futuro, para mas información sobre webgl:
http://es.wikipedia.org/wiki/WebGL, https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html
La lista de contextos soportados están en la página de contextos de canvas en http://wiki.whatwg.org/wiki/CanvasContexts
El contexto 2d representa una superficie de dibujo que es un plano cartesiano. El origen (0,0) esta en la esquina superior izquierda, los valores en X se incrementan a la derecha, y los valores en Y se incrementan hacia abajo en el espacio de coordenadas.
Creamos la superficie de dibujo con el método getContext(«2d»).
Lo que haremos en este tutorial es al dar clic sobre un elemento, mover tres círculos de la orilla izquierda al centro uno por uno, con un efecto de desaceleración cada una.
El ejemplo esta en: http://www.juan-anzaldo.com/2010/HTML5canvasG/tutorialCanvas.html
HTML
La parte del código html anterior:
<canvas id=»Stage» width=»800″ height=»460″>
</canvas>
crea un elemento tipo canvas y se especifican los atributos id, ancho y alto, así como se le asigna una clase para darle estilo. Se debe de tener cuidado de siempre establecer el ancho y el alto para evitar errores.
CSS
stage, es la clase que se aplica al elemento canvas, especificando el ancho, alto, color de fondo y color de borde.
JAVASCRIPT
De inicio creamos una variable que hace referencia al elemento canvas :
var stage = document.getElementById(«Stage»);
Despues verificamos si existe soporte para canvas en el navegador
if (stage.getContext)
Si existe el soporte entonces empezamos creando una función para crear los círculos, los parámetros de la función son: la posición x, la posición y, el radio y el color.
En la imágen se resalta el método dibuja que es el que sirve para dibujar el círculo en el canvas por medio de instrucciones del contexto 2d. El contexto 2d funciona por medio de «trazados» (paths). Un trazado es una lista de cero o mas subtrazados. Un subtrazado consiste de una lista de uno o mas puntos conectados directamente por medio de líneas o curvas, y una bandera que indica si el subtrazado es cerrado o no. Un subtrazado cerrado es uno en donde el último punto del subtrazado está conectado al primer punto del subtrazado por una línea (o curva) directa. Los subtrazados con menos de 2 puntos son ignorados cuando se pinta el trazado.
Para dibujar el circulo se usan los siguientes métodos del contexto 2d:
beginPath.- Método que Restablece el trazado actual, este método vacía la lista de subtrazados, por lo tanto el contexto se restablece a cero subtrazados.
fillStyle.- Atributo que representa el color o el estilo que se usa para el rellenado de las formas, se usa para cambiar el estilo de relleno. contexto.fillStyle [ = valor ] el valor puede ser un color CSS, un gradiente (CanvasGradient) o un patrón (CanvasPattern), los valores inválidos son ignorados.
strokeStyle.- Representa el color o el estilo que se usa para las lineas alrededor de las formas. contexto.strokeStyle [ = valor ]
arc(x, y, radio, ángulo inicial, ángulo final, contrario de las manecillas del reloj).- Este método dibuja un arco. Los puntos de inicio y de final del arco se definen cconsiderando que un circulo tiene su origen (x,y) y que tiene un radio (radio). Ángulo inicial y ángulo final se encuentran a lo largo de la circunferencia del círculo, medidos en radianes, en dirección a las manecillas del reloj, son los puntos de inicio y fin respectivamente. Sí el parámetro «contrario de las manecillas del reloj» es falso y el ángulo final menos el ángulo inicial es igual o mayor a 2π, o, si el argumento «contrario de las manecillas del reloj» es verdadero y el ángulo inicial menos el ángulo final es igual o mayor a 2π, entonces el arco es toda la circunferencia de el circulo. De otra manera, el arco es una trayectoria a lo largo de la circunferencia del circulo, desde el punto de inicio hasta el punto final. Valores negativos para el radio causan una excepción INDEX_SIZE_ERR.
closePath.- Este método marca al último subtrazado del trazado como cerrado,crea un nuevo subtrazado especificando como primer punto, el primer punto del subtrazado anterior, y finalmente agrega a este nuevo subtrazado al trazado, si el contexto no tiene subtrazados no hace nada.
fill.- Método que se usa para llenar todos los subtrazados del trazado actual, usando fillStyle, los subtrazados abiertos, son implícitamente cerrados cuando se llenan (sin afectar a los actuales subtrazados).
Seguimos:
Cada vez que dibujamos sobre el canvas debemos «limpiarlo» o borrar todo lo que este dibujado, una manera de borrar es dibujando un rectangulo con las mismas dimensiones que el canvas y especificar el color de relleno el mismo que el color de fondo del canvas, la función limpiarStage es lo que hace.
La función dibuja sirve para que cuando esté corriendo la animación, se mande llamar y vaya dibujando cada circulo esto quedara claro mas adelante.
En el código anterior definimos las variables para la animación y en la siguiente imagen la función para ejecutar la animación.
La función animaC sirve para mover los círculos de la orilla izquierda hacia el centro por el eje de las X, cuando el primer circulo llega al centro, entonces empieza el segundo y cuando llega el segundo al centro entonces empieza el tercero.
Para la desaceleración o easing se usa una formula que lo que hace es pasar de un valor a otro, disminuyendo la velocidad al acercarse al valor final.
p += ( pf – pa ) / v
donde:
p = posición
pf = posición final
pa = posoción actual
v = velocidad
Si el simbolo actual llega a 400 (ó se pasa) entonces se termina el temporizador que hace la animación, se incrementa en 1 la variable que guarda el indice del arreglo de animaciónes y se comprueba si hay un simbolo en el arreglo con el indice nuevo, si lo hay entonces se actualiza el simbolo actual y se vuelve a generar otro temporizador.
Por último:
Para finalizar, la función comenzar, es la que empieza la animación y es ejecutada del elemento <a> que esta en el html.
Canvas es muy bueno para aplicaciones donde se tenga mucha animación, o para juegos basados especialmente si no se necesita mantener el rastro de todos los objetos que se encuentran en el. Al no mantener el rastro de donde se encuentran todos los objetos, no se sobre carga la memoria.
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element
Interface 2d : http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d
Juan Anzaldo 
Debe estar conectado para enviar un comentario.