我们都知道在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上就好