canvas实现扣洞

最近要实现的需求是露出页面上的某一个元素，周围用半透明遮罩；

想到的实现方式有两种：

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