在html5画布上有很多有趣的东西，请求动画框架和用javascript制作动画，今天的这篇文章给大家分享的内容是关于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实现简单的双缓冲的详细内容。