谁知道 HTML5怎么实现mask效果

[*]function pageInit(){[*][*] var img=new Image()[*] img.onload=function(){[*][*] var ct=document.getElementById("mainCanvas").getContext("2d")[*][*] ct.beginPath()[*] ct.arc(225,200,150,0,Math.PI*2,true)[*] ct.clip()[*][*] ct.drawImage(img,0,0)[*] }[*] img.src="image.jpg"[*]}

add：遮罩累加。subtract：遮罩相减，也就是遮罩图片重合的地方不显示。intersect：遮罩相交，也就是遮罩图片重合的地方才显示遮罩。exclude：遮罩排除，也就是后面遮罩图片重合的地方排除，当作透明处理。

mask-clip的默认值是border-box，而且支持多属性值，例如：mask-clip：content-box，border-box。虽然支持的属性值挺多，但是对于普通元素而言，生效的其实就前面4个，Firefox浏览器还支持no-clip。fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。

mask-mode属性的默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。例如，如果我们的遮罩使用的是SVG中的defs中的mask元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度遮罩。如果是其他场景，则计算值是alpha，表示基于透明度遮罩。

掩膜（MASK）：全称单片机掩膜，是指程序数据已经做成光刻版，在单片机生产的过程中把程序做进去。 优点是：程序可靠、成本低。 缺点：批量要求大，每次修改程序就需要重新做光刻板，不同程序不能同时生产，供货周期长

---