離屏canvas

離屏canvas能夠很好的解決canvas的性能問題

操做步驟：

一、建立離屏canvas；
二、設置離屏canvas的寬高；
三、在離屏canvas中進行繪製；
四、在離屏canvas的所有或部分繪製到正在顯示的canvas上

domo：

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),

    offscreenCanvas = document.createElement('canvas'),
    offscreenContext = offscreenCanvas.getContext('2d');

    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;

var image = new Image();
image.src = 'balabal.jpg';

image.onload = function(){
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    offscreenContext.drawImage(image, 0, 0, canvas.width, canvas.height);
}

function oncangeDraw(){
    var w = canvas.width,
        h = canvas.height,
        sw = w * scale,
        sh = h * scale;

    //直接把離屏canvas繪製到現實的canvas上
    context.drawImage(offscreenCanvas, 0, 0, 
    offscreenCanvas.width, offscreenCanvas.height,
    -sw/2 + w/2, -sh/2 + h/2, sw, sh);
}