html5 离屏canvas 的应用

离屏canvas在大多数的情况下是应用到html5 游戏中，但是最近接触到的一个项目是运用到绘制大量的图形上。

譬如有以下的需求，在一个固定的背景图上面绘制一个动态的时间。拿到这个需求，大部分搞过html5 开发的肯定知道具体的步骤怎么做，下面我简单说一下：

1、先绘制背景。

2、将时间格式化绘制到背景上面。

3、清除canvas ，重复第一和第二步。

js文件如下：

$(document).ready(function() {

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext("2d");
setInterval(function(){
ctx.clearRect(0,0,200,200);
ctx.rect(0,0,400,400);
ctx.fillStyle='blue';
ctx.fill();
var time = new Date().getTime();
ctx.font='20pt Calibri';
ctx.strokeStyle='red';
ctx.strokeText(time,100,150);
},1000);
});

这种方式应该是满足这个需求最好的方式。

实际上在大多数的情况下这中方式也是比较不错的选择，但这个时候有一个更加复杂的需求，要求背景是比较复杂的图形，并且是很多对象组合而成的，例如下面这个仪表盘：



这是一个使用html5 绘制仪表盘，需求改变为每秒从后台获取当前的数值，然后指示到当前数值，这个时候再使用上述方式可能就不是很合适了。并且仪表盘的实现不是很麻烦，当背景数据达到3000个对象或者更多（html5中的线条）的时候，再来使用上述的方式进行绘制就不是很合适了。这个时候离屏canvas就派上用场了。

针对最上面的需求修改后的js文件如下：

$(document).ready(function() {

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext("2d");

var  offCanvas = document.createElement("canvas");
offCanvas.width=400;
offCanvas.height=400;
var offContext = offCanvas.getContext("2d");
offContext.rect(0,0,400,400);
offContext.fillStyle='blue';
offContext.fill();
setInterval(function(){
ctx.clearRect(0,0,400,400);
ctx.drawImage(offCanvas,0,0);
var time = new Date().getTime();
ctx.font='20pt Calibri';
ctx.strokeStyle='red';
ctx.strokeText(time,100,150);
},1000);
});

上面文件步骤如下：

将静态数据绘制在离屏canvas上面，在当前的canvas上面绘制离屏canvas，在再将动态数据绘制在当前canvas上面，这样就能减少静态数据的绘制次数。