canvas globalCompositionOperation属性

    详细效果主要看图片
目标图像：前一个图像
源图像：后一个图像    
source开头，后一个覆盖前一个
destination开头，前一个覆盖后一个

图片可能不清楚 依次展示的效果为以下属性
source-over
source-in
source-out
source-atop

destination-over(默认值)
destination-in
destination-out
destination-atop

var cans1 = document.getElementById('canvas1');
if(cans1.getContext){
    var ctx1 = cans1.getContext('2d');
    ctx1.beginPath();
    ctx1.fillStyle = 'red';             //源图像
    ctx1.fillRect(50,50,100,100);
    //图像组合
    ctx1.globalCompositeOperation = 'destination-over';
    ctx1.fillStyle = 'green'
    ctx1.arc(150,150,50,0,Math.PI*2);       //目标图像
    ctx1.fill();
    // ctx1.font = "bold italic 20px arial";
    // ctx1.fillStyle = 'black'
    // ctx1.fillText('destination-over',20,20);  


    //目标图像：前一个图像
    //源图像：后一个图像    
    //source开头，后一个覆盖前一个
    //destination开头，前一个覆盖后一个}
    var cans2 = document.getElementById('canvas2');
if(cans2.getContext){
    var ctx2 = cans2.getContext('2d');
    ctx2.beginPath();
    ctx2.fillStyle = 'red';
    ctx2.fillRect(50,50,100,100);
    //图像组合
    ctx2.globalCompositeOperation = 'destination-in';
    ctx2.fillStyle = 'green'
    ctx2.arc(150,150,50,0,Math.PI*2);
    ctx2.fill();
    }
}

另外，开始想在每个canvas标签里都加上文本，但是最后发现失败了，原因：因为不同的图片会只有重叠部分可见等等，所以文本无法直接显示