1.3 KiB
1.3 KiB
title | localeTitle |
---|---|
Animation | Animación |
Animación en lienzo
Para animar cosas en el canvas
, use window.requestAnimationFrame
para configurar un ciclo de dibujo.
function draw() {
/* code goes here */
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
El siguiente código hará que la función de draw
se ejecute en cada fotograma.
canvas
no tiene funciones especiales que permitan animar. Solo tienes que estar acostumbrado a escribir en bucles de animación. El paradigma de diseño habitual para los bucles de animación es actualizar el estado, luego dibujar el estado. Por ejemplo, para dibujar un cuadrado moviéndose a través de la pantalla:
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var x=0;
var y=50;
function draw() {
// reset canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//update state
x+=1;
// render state
ctx.beginPath();
ctx.rect(x, y, 50, 50);
ctx.fill();
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
Para ver este concepto en acción, vea la página ' Simulador de partículas '.