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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！