Canvas API: Animando Formas com requestAnimationFrame

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.