HTML 5 canvas globalCompositeOperation 属性

　　如上图所示，我们该如何实现这样的效果呢？只显示指定区域的图片。
　　是的，就是使用canvas的globalCompositeOperation属性。
　　

1.首先我们定义一个和图片大小一样的canvas，并将其contex的globalCompositeOperation属性设置为source-over。

   var maskContext = canvas.getContext('2d');    maskContext.globalCompositeOperation='source-over';    maskContext.fillRect(0,0,maskWidth,maskHeight);

2.然后再定义一个圆形的绘图。

    maskContext.globalCompositeOperation='destination-out';    maskContext.beginPath();    maskContext.arc(maskX,maskY,MASK_R,0,Math.PI*2,true);    maskContext.fill();

　　globalCompositeOperation 属性设置如何将一个源（新的）图像绘制到目标（已有）的图像上。
　源图像 = 您打算放置到画布上的绘图。
　目标图像 = 您已经放置在画布上的绘图。
　其中：
source-over：在目标图像上显示源图像。
destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示。源图像是透明的。