如上图所示,我们该如何实现这样的效果呢?只显示指定区域的图片。
是的,就是使用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:在源图像外显示目标图像。只有源图像外的目标图像部分会被显示。源图像是透明的。