html5 canvas实现简单的双缓冲

在HT ML 5 画布 上有很多有趣的东西，请求动画框架和用JavaScript 制作 动画，今天的这篇 文章 给大家分享的内容是关于 HTML5 canvas 实现 简单 的双缓冲，有需要的 朋友 可以看一看文章中的方法。

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

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

 VAR   Primary Ctx = 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);
     PR imaryCtx.drawImage(secondaryCanvas);
    })();

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

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

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

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

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

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

总结

以上是 为你收集整理的 html5 canvas实现简单的双缓冲 全部内容，希望文章能够帮你解决 html5 canvas实现简单的双缓冲 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5 canvas实现简单的双缓冲的详细内容...