🥇 Buffer duplo fácil na tela HTML5

Há muitas coisas legais em torno da tela HTML5, requestAnimationFrame e fazendo animações com Javascript.

Se puder, você também deve verificar as animações CSS se quiser animar elementos DOM.

Para coisas mais avançadas, você pode querer usar um canvas, que geralmente é acelerado por GPU e permite taxas de quadros bastante altas e estáveis window.requestAnimationFrame.

Se você precisar de buffer duplo na tela, uma das maneiras populares é criar um segundo elemento da tela e desenhar naquele e, em seguida, desenhar a imagem completa na tela principal usando drawImage, resultando em algo assim:

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
})();

que nunca pareceu muito certo.

Entre ctx.save()ectx.restore()
hoje descobri que há uma maneira que parece mais limpa e tem um desempenho tão bom quanto o método acima:

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
})();

que, apesar dos nomes estranhos, apenas congela a renderização do contexto e então retoma a renderização depois de terminarmos de desenhar nele.

Related Posts