最近要实现的需求是露出页面上的某一个元素，周围用半透明遮罩；
想到的实现方式有两种：
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);}
实现的圆精度不是非常高，会有稍微的瑕疵(毛边)，在精度不是很高的场合已经够用了。
转载于:https://www.cnblogs.com/chjb/p/9558925.html