[*]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,表示基于透明度遮罩。
评论列表(0条)