html5 canvas完成简朴的双缓冲【html5教程】

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

只管称号很新鲜，然则它只是冻结了上下文的显现，然后在完成画图以后恢复显现。

本篇文章到这里就悉数完毕了，更多精彩内容人人能够关注ki4网相干视频教程栏目！！！

以上就是html5 canvas完成简朴的双缓冲的细致内容，更多请关注ki4网别的相干文章！