离屏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);
}