最近要实现的需求是露出页面上的某一个元素,周围用半透明遮罩;
想到的实现方式有两种:
1、用扣洞的半透明图片,图片的尺寸要尽量大,以确保屏幕变化能全部遮住,这里需要稍微计算下图片上的洞的位置,和页面上要露出的元素的位置,稍微调整是可以实现的;
2、用canvas实现,canvas实现比较灵活,缺点是精度没有图片那么高,这里主要用到了canvas的 clearRect方法,一小块一小块的清除,最后成圆。
上代码
function getTheArc(){ var canvas=document.getElementById('c_planeCanvas'); canvas.width=$(window).width(); canvas.height=$(window).height(); var context=canvas.getContext('2d'); context.fillStyle = "rgba(0,0,0,0.6)"; context.fillRect(0,0,canvas.width,canvas.height); var stepClear=0.2,radius=40,//这里的stepClear为每次高度增加的精度,测试发现小于0.2之后并无明显的效果变化 srcPy=$(window).height()-75, srcPx=radius+5; (function(x,y,radius){ var calcWidth=radius-stepClear; var calcHeight=Math.sqrt(radius*radius-calcWidth*calcWidth); var posX=x-calcWidth; var posY=y-calcHeight; var widthX=2*calcWidth; var heightY=2*calcHeight; if(stepClear<=radius){ context.clearRect(posX,posY,widthX,heightY); stepClear+=0.2; arguments.callee(x,y,radius); } })(srcPx,srcPy,radius); }
实现的圆精度不是非常高,会有稍微的瑕疵(毛边),在精度不是很高的场合已经够用了。