html5 canvas实现的双缓冲

如果您需要在画布上进行双重缓冲，那么一种流行的方法是创建第二个画布元素并绘制到那个画布元素，然后使用drawImage将完成的图像绘制到主画布，结果如下：

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);
    })();

输入CTX.SAVER（）和CTX.Rebug（）

今天，我发现有一种方法更清洁，效果和上面的方法一样好：

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

尽管名称很奇怪，但是它只是冻结了上下文的呈现，然后在完成绘图之后恢复呈现。

这篇好文章是转载于：学新通技术网