Animação em Canvas - JavaScript

A combinação de desenhar várias formas no canvas com o uso da função requestAnimationFrame() permite criar animações no conteúdo do elemento canvas.

A animação, por si só, implica na mudança sequencial de quadros, onde cada quadro precisa ser desenhado manualmente. De modo geral, para criar uma animação, você deve seguir os seguintes passos:

Limpar a área de desenho.
Opcionalmente, salvar o estado atual.
Desenhar o quadro individual.
Opcionalmente, restaurar o estado salvo.

Esses passos geralmente são encapsulados em uma função, que é chamada em intervalos regulares (para cada quadro da animação). Para executar essa função, usa-se o método requestAnimationFrame(), que é especialmente projetado para trabalhar com animações dentro de páginas web.

Por exemplo, considere a seguinte página:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>Exemplo de Canvas</title>
    </head>
    <body>
      <canvas
        id="canvas"
        width="400"
        height="250"
        style="background-color: #eee; border-color: #ccc"
      ></canvas>
      <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        let x = 0;
        let step = 1;
        function draw() {
          context.clearRect(0, 0, 400, 250); // limpar a área de desenho
          console.log(x);
          context.fillStyle = 'red';
          context.fillRect(x, 10, 40, 40); // desenhar o retângulo
          if (x >= 360) step = -1;
          if (x <= 0) step = 1;
          x += step;
          window.requestAnimationFrame(draw);
        }
        draw();
      </script>
    </body>
  </html>

Animando figuras no canvas em JavaScript

Aqui, a função draw() contém o código que desenha o retângulo. A primeira chamada da função desenha o primeiro quadro da animação. No final da função, o método requestAnimationFrame é chamado, passando novamente a função draw como argumento, o que efetivamente inicia a animação. Dessa forma, a função draw() continua se chamando para desenhar novos quadros. A essência da animação está na mudança da coordenada x do retângulo. A cada desenho, o retângulo é exibido em uma nova posição, criando a ilusão de movimento.

De maneira similar, é possível animar composições inteiras de formas:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
function draw() {
    context.clearRect(0,0,500,300);   // limpar a área de desenho  
    const time = new Date();  
    // ângulo para a rotação dos retângulos 
    const angle = ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds(); 
    context.fillStyle = "red";   
    context.save();                   
    context.translate(150,150);       
    context.rotate(angle);           
    context.translate(0,25);         
    context.fillRect(5,5,20,20);      // retângulo vermelho  
    context.restore();       
  
    context.fillStyle = "yellow";   
    context.save();                   
    context.translate(150,150);       
    context.rotate(angle);           
    context.translate(0,50);         
    context.fillRect(5,5,20,20);      // retângulo amarelo
    context.restore();              
  
    context.fillStyle = "green";  
    context.save();                  
    context.translate(150,150);       
    context.rotate(angle);           
    context.translate(0,75);         
    context.fillRect(5,5,20,20);      // retângulo verde
    context.restore();                 
    window.requestAnimationFrame(draw);
}
draw();

Animando figuras no canvas usando requestAnimationFrame em JavaScript

Neste exemplo, vários retângulos coloridos são desenhados em diferentes posições e ângulos, criando uma animação onde as formas parecem girar em torno de um ponto central. A função requestAnimationFrame() continua chamando a função draw(), mantendo a animação em execução constante.