離屏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上面，這樣就能減少靜態資料的繪製次數。