到底什么是离屏canvas，怎么使用它

我们都知道在canvas中绘制相关数据是会显示出来的。但是离屏canvas并不会。不管你在上面做上面操作都不会显示出来。需要调用显示在当前非离屏canvas上才会显示

canvas绘制本身就是不断的更新帧从而达到动画的效果。离屏canvas本身可以说就是一样图片。你在创建好的canvas上调取离屏canvas（在上面画好图之后，就当做这个是一个图片）显示出来就好了。但是具体如何实现请看下面的代码。看完你应该就清楚了

首先创建一个canvas的标签

<canvas id="canvas"></canvas>

    var canvas = document.getElementById("canvas");//非离屏canvas这个是上面html中定义好的
    canvas.width = 400;
    canvas.height = 400;
    var ctx = canvas.getContext("2d");


    var  offCanvas = document.createElement("canvas");//离屏canvas 通过代码创建出来的
    offCanvas.width=400;
    offCanvas.height=400;
    var offContext = offCanvas.getContext("2d");
    //对离屏canvas 进行绘制  （所有的绘制在离屏canvas上面进行绘制 ）
    offContext.rect(0,0,400,400);
    offContext.fillStyle='blue';
    offContext.fill();
    setInterval(function() {
        ctx.clearRect(0, 0, 400, 400);
        ctx.drawImage(offCanvas, 0, 0);//将之前绘制好的离屏canvas 当做一张图片 绘制在非离屏canvas上 这样就显示出来了
        var time = new Date().getTime();
        ctx.font = '20pt Calibri';
        ctx.strokeStyle = 'red';
        ctx.strokeText(time, 100, 150);
    });

有没发现什么。将之前的离屏canvas（offCanvas）当做图片，然后绘制在非离屏canvas上，是的，最后一步到了显示的时候绘制在非离屏canvas上，绘制的内容就显示出来了。下面就是将离屏绘制在当前的canvas上的api

ctx.drawImage(offCanvas, 0, 0);

离屏canvas可以用过动态创建出来，如下

var  offCanvas = document.createElement("canvas");

你可以先在离屏canvas上做一些复杂的操作，然后处理完毕后，使用上面这句话。放在非离屏的canvas上就好