HTML5 introdujo a los desarrolladores la posibilidad de crear animaciones y manipular gráficos mediante canvas,
usando las capacidades nativas del navegador sin usar plugin externos como flash o silverlight
esto nos puede servir para muchas cosas, por ejemplo juegos o animaciones
canvas esta soportado en los navegadores actuales ya sea en versiones mobiles y de escritorio
para empezar creamos un archivo al que llamamos canvas.animation.html
creamos un elemento canvas y llamamos al método getContext que nos permite usar la api canvas
agregamos la etiqueta canvas al body de nuestro archivo, pasandole las dimensiones y un id que nos va a servir para hacer usar la api canvas mediante javascript
debido a que no todos los navegadores soportan la etiqueta canvas nos aseguramos que este disponible,
para detectar si tal elemento es soportado, podemos usar la libreria modernizr,
para este ejemplo vamos a hacer una verficaciòn manual
si nuestro navagador soporta canvas usamos el metodo getElementById pasandole como parametro le id de nuestra etiqueta canvas
despues creamos el contexto que nos permite usar canvas mediante getContext pasando 2d como parametro ( tambien existe la posibilad de crear graficos en 3D mediante webGL )
creamos una clase a la que llamamos Circle y le pasamos el parametro radius
añadimos un metodo a la clase Circle mediante prototype ,
este metod usa translate para mover el metodo a una nueva posicion de acuerdo a los parmetros que le pasamos, lo mismo sucede con lineWidt
para dibujar un circulo usamos el metodo arc que lleva 6 parametros
los dos primeros corresponde a la posicion del elemento, el tercero es el radius del circulo
el tercero identifica donde empieza el angulo y el quinto donde termina este
los angulo en canvas estan en radians en vez de grados, para convertirlo usamos el objeto Math.PI
hace un tiempo para crear animaciones se usaba setInterval al cual le pasamos como parametro una funciòn anonima que contiene el codigo que se ejecuta initerrupidamente cada cierto tiempo que toma el valor que le pasamos como segundo parametro ( en este caso 1000ms o sea un segundo);
por suerte los navegadores actuales soporta una nueva api que esta optimizada , mejora el rendimiento, y tambien en caso de que no estemos en otra pestaña diferente a la animacion, detiene el loop para no gastar recurso innecesarios
debido a que cada navagador tiene su implementacion vamos a usar este hack cortesia de paul irish
si requestAnimationFrame no esta definido agregamos una propiedad al objeto windows y vamos verificando cada implementación de los navegadores mediante el operador || , si estamos en un navegador antiguo usamos setInterval
creamos una instancia de la clase Circle creada anteriormente ,
creamos una variable llamada speed que nos va a servir mas adelante para cambiar la posición del circulo
esta funcion es la que se encarga de generar el loop y de generar la animacion deseada
primer llamados al metod requestAnimationFrame que definimos mas arriba, despues modificamos la posicion del circulo metiante la propiedad x , y
al pobrar el ejemplo en el navegador nos encontramos con un problema,
<img class="alignnone" title="canvaserror" src="http://i.imm.io/O06e.png" alt="" width="405" height="404" />
ya que el circulo cambia de posición pero no borra la anterior posición y se ve de esta manera
para solucionar esto usamos el método clearRect
esto logra que en cada loop, borre lo que estaba dibujado anteriormente y muestre el circulo en una nueva posición generado la animación
los dos primeros parámetros que toma es la posición en coordinadas de canvas y los últimos dos son el tamaño que se va a borrar,
en este caso usamos toda la pantalla mediante canvas.width y canvas.height
en proximos tutoriales vamos a ver como mejorar este ejemplo, agragando limites para que el circulo no desaparesca de la pantall y para cambiar lo posicion mediante el mouse y el teclado
codigo completo
usando las capacidades nativas del navegador sin usar plugin externos como flash o silverlight
esto nos puede servir para muchas cosas, por ejemplo juegos o animaciones
canvas esta soportado en los navegadores actuales ya sea en versiones mobiles y de escritorio
para empezar creamos un archivo al que llamamos canvas.animation.html
[color=#000000]
<!doctype html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
[/color]
creamos un elemento canvas y llamamos al método getContext que nos permite usar la api canvas
[color=#000000]
<canvas id="canvas" width="400" height="400"></canvas>
[/color]
agregamos la etiqueta canvas al body de nuestro archivo, pasandole las dimensiones y un id que nos va a servir para hacer usar la api canvas mediante javascript
debido a que no todos los navegadores soportan la etiqueta canvas nos aseguramos que este disponible,
para detectar si tal elemento es soportado, podemos usar la libreria modernizr,
[color=#000000]
if(Modernizr.canvas){
// codigo canvas
}
[/color]
para este ejemplo vamos a hacer una verficaciòn manual
[color=#000000]
if(!!document.createElement("canvas").getContext)){
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
}
[/color]
si nuestro navagador soporta canvas usamos el metodo getElementById pasandole como parametro le id de nuestra etiqueta canvas
despues creamos el contexto que nos permite usar canvas mediante getContext pasando 2d como parametro ( tambien existe la posibilad de crear graficos en 3D mediante webGL )
[color=#000000]
function Circle (radius) {
this.x = 0;
this.y = 0;
this.radius = this.radius;
}
[/color]
creamos una clase a la que llamamos Circle y le pasamos el parametro radius
[color=#000000]
Circle.prototype.draw= function (context) {
context.restore();
context.translate(this.x, this.y);
context.lineWidth = this.lineWidth;
context.beginPath();
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
context.save();
};
[/color]
añadimos un metodo a la clase Circle mediante prototype ,
este metod usa translate para mover el metodo a una nueva posicion de acuerdo a los parmetros que le pasamos, lo mismo sucede con lineWidt
para dibujar un circulo usamos el metodo arc que lleva 6 parametros
los dos primeros corresponde a la posicion del elemento, el tercero es el radius del circulo
el tercero identifica donde empieza el angulo y el quinto donde termina este
los angulo en canvas estan en radians en vez de grados, para convertirlo usamos el objeto Math.PI
[color=#000000]
setInterval(function(
// codigo para cambiar la posicion
),1000)
[/color]
hace un tiempo para crear animaciones se usaba setInterval al cual le pasamos como parametro una funciòn anonima que contiene el codigo que se ejecuta initerrupidamente cada cierto tiempo que toma el valor que le pasamos como segundo parametro ( en este caso 1000ms o sea un segundo);
por suerte los navegadores actuales soporta una nueva api que esta optimizada , mejora el rendimiento, y tambien en caso de que no estemos en otra pestaña diferente a la animacion, detiene el loop para no gastar recurso innecesarios
debido a que cada navagador tiene su implementacion vamos a usar este hack cortesia de paul irish
[color=#000000]
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 17);
});
}
[/color]
si requestAnimationFrame no esta definido agregamos una propiedad al objeto windows y vamos verificando cada implementación de los navegadores mediante el operador || , si estamos en un navegador antiguo usamos setInterval
[color=#000000]
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
ball = new Circle(),
speed = 1;
[/color]
creamos una instancia de la clase Circle creada anteriormente ,
creamos una variable llamada speed que nos va a servir mas adelante para cambiar la posición del circulo
[color=#000000]
function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
;
ball.x += speed;
ball.y += speed;
ball.draw(context);
}
drawFrame();
[/color]
esta funcion es la que se encarga de generar el loop y de generar la animacion deseada
primer llamados al metod requestAnimationFrame que definimos mas arriba, despues modificamos la posicion del circulo metiante la propiedad x , y
al pobrar el ejemplo en el navegador nos encontramos con un problema,
<img class="alignnone" title="canvaserror" src="http://i.imm.io/O06e.png" alt="" width="405" height="404" />
ya que el circulo cambia de posición pero no borra la anterior posición y se ve de esta manera
para solucionar esto usamos el método clearRect
[color=#000000]
context.clearRect(0, 0, canvas.width, canvas.height);
[/color]
esto logra que en cada loop, borre lo que estaba dibujado anteriormente y muestre el circulo en una nueva posición generado la animación
los dos primeros parámetros que toma es la posición en coordinadas de canvas y los últimos dos son el tamaño que se va a borrar,
en este caso usamos toda la pantalla mediante canvas.width y canvas.height
en proximos tutoriales vamos a ver como mejorar este ejemplo, agragando limites para que el circulo no desaparesca de la pantall y para cambiar lo posicion mediante el mouse y el teclado
codigo completo