html5 canvas实现简单的双缓冲

对于更高级的内容，您可能希望使用画布，这通常是GPU加速的，并且允许使用window.request.tionFrame进行相当高和稳定的帧速率。（推荐课程：HTML5视频教程）

如果您需要在画布上进行双重缓冲，那么一种流行的方法是创建第二个画布元素并绘制到那个画布元素，然后使用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    }
    )();
    

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

本篇文章到这里就全部结束了，更多精彩内容大家可以关注相关视频教程栏目！！！

以上就是html5 canvas实现简单的双缓冲的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！