Inicio > canvas, HTML5, javascript, Web 2.0 > Que es HTML5 Canvas, tutorial de animación básica.

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”).

Sistema de coordenadas

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

Código 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

Código CSS

stage, es la clase que se aplica al elemento canvas, especificando el ancho, alto, color de fondo y color de borde.

JAVASCRIPT

Javascript parte 1

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:

Javascript Parte 2

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.

Javascript Parte 3

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.

Javascript Parte 4

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:

Javascript Parte 5

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

  1. Vinci
    noviembre 5, 2010 a las 11:28 am

    “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.

    La web no tiene las caracteristicas necesarias ni son estandares en los distintos navegadores.

  2. €quiman
    septiembre 1, 2011 a las 1:21 pm

    Esta muy bien el ejemplo pero con las imagenes tan mal cargadas es dificil comprender lo que se va diciendo y tratar de ver lo que dice la imagen.

    Creo que es mejor que lo hagas usando las etiquetas CODE o QUOTE.

  3. Princess
    diciembre 28, 2011 a las 8:01 am

    ¿Necesito tener el Java instalado para hacer todo esto?

    • kensou
      enero 10, 2012 a las 12:55 pm

      no , solo realizar todo el ejemplo y funciona,

  4. Victor Eduardo
    mayo 10, 2012 a las 5:37 pm

    Amigos soy nuevo en jquery y se que este no es el tema pero tengo una gran duda estoy adaptando un banner hecho con jquery pero me llama la atencion que la referencia de la libreria jquery esta en el body y cuando la quiero colocar en el head me marca errores, la regreso al body y todo corre muy bien, alguien sabe que puede ser?

    esta es la liga del demo (para no pegar todo el codigo aqui)

  5. Victor Eduardo
  6. gilber
    junio 26, 2012 a las 11:00 am

    oye pero como aplico otro elementos y que sean estaticos o que se muevan en otra oportunidad o ante otro evento?

  7. enero 11, 2013 a las 7:28 am

    I’ve been browsing online more than 3 hours today, but I never discovered any fascinating article like yours. It’s beautiful value enough for me.
    Personally, if all webmasters and bloggers made good content as you probably did, the internet will likely be much more helpful than ever before.

  8. marzo 20, 2013 a las 3:48 pm

    I read this post fully regarding the comparison
    of most up-to-date and earlier technologies, it’s remarkable article.

  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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

A %d blogueros les gusta esto: