离屏canvas

离屏canvas可以很好的解决canvas的性能问题

操作步骤：

1、创建离屏canvas；
2、设置离屏canvas的宽高；
3、在离屏canvas中进行绘制；
4、在离屏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);
}