HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）

忘是亡心i 2022-07-13 14:10 2108阅读 0赞

# **HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）** #

使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑屏的一种可能性：

http://blog.csdn.net/yuhk231/article/details/53560782

那么如果我们面对的场景就是移动端各大浏览器呢？当出现黑屏、白屏的时候就只能认栽了吗？不是的，还有很多优化工作是我们可以做的。在这里本文就将详细分析绘图策略中最伟大的方法：双缓冲绘图机制。

百度百科搜索双缓冲技术绘图，解释如下：双缓冲即在内存中创建一个与屏幕绘图区域一致的对象，先将图形绘制到内存中的这个对象上，再一次性将这个对象上的图形拷贝到屏幕上，这样能大大加快绘图的速度。拿html5-canvas场景来举例：就是我们创建两个相同的画布，一张画来打草稿（在内存中的canvas虚拟节点上绘制），一张真正画给观众看（真正的页面dom元素canvas绘制）。

介绍完了背景知识，那这种技术到底能做什么？说了那么多和本文的主题解决黑屏白屏问题又有什么关联？

## ·黑屏 ##

先来讨论黑屏的情况。我们知道，移动设备上canvas呈现出黑屏很大一部分原因就是绘图的计算量太大，导致设备显示出现问题。那么最直接的解决方案就是减少计算量（或者称为优化）。

正常情况下，我们会为页面添加一个canvas元素，并且一边算各种图形坐标，一边一点点的绘制上去。在这个过程当中我们就损耗了相当大的性能，每执行一次context.fill()或者context.stroke()，图形都会被渲染一次。而利用双缓冲机制，我们这样处理：为页面添加一个canvas元素，同时创建另一个一个一模一样的canvas元素，但是不添加到页面dom树（也就是存在内存中），这时我们在内存中的canvas元素上一边算图形坐标一边绘制，当绘制完成时直接调用canvas的复制方法（context.drawImage）一次性将“草稿画布”上的图形绘制到真正的页面canvas元素上，通过这样的技巧，我们将会节省大量页面绘制的性能损耗，不但能解决黑屏的问题，还能缩短图形绘制的时间。这里有一篇可以说明虚拟画布和普通画布差异的文章：

http://blog.csdn.net/yuhk231/article/details/54376525

下面我们来描述一下javascript如何实现上文所述的双缓冲机制。

先来看一段很普通的绘制一个正方形的代码：

下面一段代码与前面的代码功能完全相同，但是实现时使用了双缓冲绘图机制：

//获取页面中的canvas画布容器，通常为一个div
    var container=document.getElementById("container");
    //创建一个真实的画布，他将呈现给用户
    var realCanvas=document.createElement("canvas");
    //设置realCanvas的width/height属性，乘以二以防止像素点模糊问题
    realCanvas.width=container.clientWidth*2;
    realCanvas.height=container.clientHeight*2;
    //设置realCanvas的样式width/height属性，填充满父元素
    realCanvas.style.width=container.clientWidth+"px";
    realCanvas.style.height=container.clientHeight+"px";
    container.appendChild(realCanvas);
    //创建一个虚拟节点cacheCanvas，我们不会将他添加到页面上
    var cacheCanvas=document.createElement("canvas");
    //设置cacheCanvas的width/height属性，和realCanvas的完全相同
    cacheCanvas.width=container.clientWidth*2;
    cacheCanvas.height=container.clientHeight*2;
    //开始绘制，获取真实节点和虚拟节点的上下文context
    var realContext=realCanvas.getContext("2d");
    var cacheContext=cacheCanvas.getContext("2d");
    /*
     * 这次试用双缓冲技术，我们在cacheCanvas中绘制，
     * 但此时什么都看不到，因为cacheCanvas没有添加到页面上
     */
    cacheContext.fillRect(0,0,100,100);
    /*
     * 在缓冲区完成绘制之后，我们将缓冲区的内容一次性绘制到页面上
     */
    realContext.drawImage(cacheCanvas,0,0);

经过了这样的优化之后，一般的图形都不会在出现HTML5-canvas黑屏的现象了。

## ·白屏 ##

说完了黑屏，接下来说说白屏。

先简单阐述一下为什么会产生白屏。首先可以肯定的是：白屏一定是程序有问题！最常见的情况：

（1）绘图代码报错，导致绘图不执行，因此出现白屏

（2）计算图形坐标的时候算错，比如计算出无穷大或者undefined或者超出画布边界的坐标值，导致你画的图看不见（HTML5-canvasAPI在执行绘图方法时传入的数据异常时不会抛出任何错误），也是白屏。

（3）没有给画布canvas设置width或height或值为0，比如画布初始化的时候页面还没有撑开，导致画布canvas元素的高度或者宽度为零，也会出现白屏。

（4）如果看到这里仍然没有解决你的白屏问题，那么恭喜你，本文将帮助你解决“canvas动画白屏闪烁”问题。首先简单说下什么是“canvas动画白屏闪烁”。

做过H5-canvas动画的读者肯定知道动画制作的基本原理：

1.将画布清空

2.计算下一帧图形并绘制

3.空出一帧的时间（通常为16ms）

4.循环第一步

我们用一个简单的线条变长的动画代码为示例，进一步说明这四步动画过程：

//获取页面中的canvas画布容器，通常为一个div  
    var container=document.getElementById("container");  
    //创建一个真实的画布，他将呈现给用户  
    var realCanvas=document.createElement("canvas");  
    //设置realCanvas的width/height属性，乘以二以防止像素点模糊问题  
    realCanvas.width=container.clientWidth*2;  
    realCanvas.height=container.clientHeight*2;  
    //设置realCanvas的样式width/height属性，填充满父元素  
    realCanvas.style.width=container.clientWidth+"px";  
    realCanvas.style.height=container.clientHeight+"px";  
    container.appendChild(realCanvas);  
    /*-------------------初始化--------------------*/
    //开始绘制  
    var realContext=realCanvas.getContext("2d");
    //初始化线条长度，这个长度将会随着动画演进而变长
    var lineHeight=0,
    //设置动画帧间隔为16毫秒
        tick=16;
    //使用setTimeout定时器保证动画帧间隔相同
    setTimeout(function animate(){
        //步骤一
        realContext.clearRect(0,0,realCanvas.width,realCanvas.height);
        //步骤二
        lineHeight++;
        //步骤三
        realContext.moveTo(10,10);
        realContext.lineTo(10,lineHeight);
        //步骤四，在下一个定时器中调用内联函数，从而创造出流畅的动画
        setTimeout(animate,tick);
    },tick);

用一个图形来形象的表示这段代码的过程：

![Center][]

这幅图表示了我们用普通动画代码实现方案时程序执行的过程，首先设置了帧间隔16毫秒，我们在javascript中使用定时器”setTimeout“方法来每个16毫秒执行一次动画绘图；然后当方法开始执行时，我们擦除上一帧的图像（清空画布）；接着计算下一帧图像的坐标点；最终绘制新的图像，然后下一帧循环往复，形成了流畅的动画。很多细心的读者应该已经发现了，当我们要绘制时，先执行了擦除，再来计算图形以及绘制，那么计算图形这段时间画布不就会显示“空白”。在前文提供的例子里大家永远不会看到画布空白，因为计算线条图形的时间太短了（小于10纳秒），但是当我们绘制的动画图形足够复杂时，在某些计算能力不足的设备的浏览器上就会看到“canvas动画白屏闪烁”。双缓冲绘图技术同样可以巧妙的解决这个问题。

\---------------------------------------------------------------------

### 注意： ###

可能会有人想说把“计算图形”和“擦除”两个步骤对换位置不就解决问题了？看下面绘制五条线条的动画代码你就会知道，实际场景中我们编写的代码往往会把“计算图形”和“绘制”混杂在一起，使得“擦除”必须在之前执行。

//五条线的初始化长度
    var lineHeight=[0,0,0,0,0],
        tick=16;
    setTimeout(function animate(){
        //“擦除”操作还能放在哪里呢？
        realContext.clearRect(0,0,realCanvas.width,realCanvas.height);
        for(var i=0;i<5;i++){
            realContext.moveTo(10*i,10);
            //使用lineHeight++的方式，使得计算图形和绘制混杂在了一起
            realContext.lineTo(10*i,lineHeight[i]++);
        }
        setTimeout(animate,tick);
    },tick);

\---------------------------------------------------------------------

对于如何使用双缓冲绘图机制解决“白屏闪烁”的问题，我们同样先展示代码，然后通过一张流程图形来详细讲解实现过程：

//初始化元素，会创建一个真实画布和虚拟画布
    var container=document.getElementById("container");
    var realCanvas=document.createElement("canvas");
    var cacheCanvas=document.createElement("canvas");
    realCanvas.width=container.clientWidth*2;
    realCanvas.height=container.clientHeight*2;
    cacheCanvas.width=container.clientWidth*2;
    cacheCanvas.height=container.clientHeight*2;
    realCanvas.style.width=container.clientWidth+"px";
    realCanvas.style.height=container.clientHeight+"px";
    container.appendChild(realCanvas);
    var realContext=realCanvas.getContext("2d");
    var cacheContext=cacheCanvas.getContext("2d");
    /*-------------------初始化完毕--------------------*/
    var lineHeight=0,tick=16;
    //第一遍绘制
    cacheContext.clearRect(0,0,realCanvas.width,realCanvas.height);
    lineHeight++;
    cacheContext.moveTo(10,10);
    cacheContext.lineTo(10,lineHeight);
    //将cacheCanvas一次性整张画到realCanvas上
    realContext.drawImage(cacheCanvas,0,0);
    setTimeout(function animate(){
        //先在虚拟画布上绘制，此时不影响页面
        cacheContext.clearRect(0,0,realCanvas.width,realCanvas.height);
        cacheContext++;
        cacheContext.moveTo(10,10);
        cacheContext.lineTo(10,lineHeight);
        //此时重绘页面
        realContext.clearRect(0,0,realCanvas.width,realCanvas.height);
        realContext.drawImage(cacheCanvas,0,0);
        setTimeout(animate,tick);
    },tick);

流程图如下：

![Center 1][]  
这一次由于我们将“重新计算坐标点”以及“重新绘制”两个耗时操作移到了虚拟画布上（也就是双缓冲机制），而在最后才通过realContext.drawImage()的方式一次性将虚拟画布上的图形呈现到页面上（这个操作通常小于1ms）。通过这种优化手段，即使再复杂的图形绘制，页面上也不会再看到动画帧之间的白屏问题，耗时操作都在虚拟节点上执行，真正的画布只会在虚拟画布准备好图形之后才擦除+重绘。

[熬夜不易，请作者喝酒！][Link 1]

[Center]: /images/20220713/de258943416943f98e0e499e61300442.png
[Center 1]: /images/20220713/bd4279c3c4cd477187b4ef2a131716bf.png
[Link 1]: https://raw.githubusercontent.com/bigbird231/iTest/master/imgs/drink.png