如何在div上挖洞？
如何在div上挖洞？
提问于 2017-10-25 14:26:16
我有2层，我想在前一层做洞，让用户看到后面的一层。为了这个目的，我在画布中画圆圈，在两层之间放置惠奇(不知道它的位置是否正确)。
为了演示的目的，我已经爆炸了3层，并展示了画布。
我尝试了几个混合/面具组合，但我在这里遗漏了一些东西，并寻求帮助。
关于这两层画布应该放在哪里，我应该做什么样的混合操作来在前一层上造洞？
一种解决方案应该是告诉最前面的层，当显示时，它应该使用画布作为alpha掩码。
注:背层应保持不动。
下面是一个解释布局的截图：
...and代码链接：掩模效应
/***
** onclick(e)
*/
$( document ).click(function(e) {
var ctx = $("canvas")[0].getContext('2d');
var radius = Math.random() * 50 + 10;
ctx.beginPath();
ctx.arc(e.clientX, e.clientY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
// ctx.globalCompositeOperation = 'screen';
// ctx.drawImage(ctx.canvas.toDataURL("image/png"),0,0); // debug: visualize
$('#front').css({
'mask-image':"url(" + ctx.canvas.toDataURL("image/png")+ ")",
'background-blend-mode':"screen",
'background-image':"url(" + ctx.canvas.toDataURL("image/png")+ ")"
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-25 16:40:46
好的，非常感谢你！我缺少了clearRect()函数来处理alpha层，经过一些调整后，我找到了解决方案:)
实际上，这个解决方案与我想要做的完全相反:在默认情况下，倒置的克隆人在前面，但完全被掩盖了。当我点击时，我用颜色填充面具，这会让前景出现。
下面是工作代码链接：https://codepen.io/SOLESHOE/pen/YrmyoX
var canvas = null;
/***
** $(document).ready()
*/
$(document).ready(function(){
var el = $("#container");
canvas = document.createElement('canvas');
canvas.width = el.width();
canvas.height = el.height();
canvas.position = "absolute";
var ctx = canvas.getContext("2d");
ctx.clearRect( 0, 0, canvas.width, canvas.height );
var clone = el.clone();
clone.toggleClass('white blue');
clone[0].setAttribute('id','front');
clone.css({"width":el.width()+"px",
"height":el.height()+"px",
'mask-image':"url(" + canvas.toDataURL("image/png")+ ")",
'position':"absolute"
});
$("body")[0].appendChild(clone[0]);
});
/***
** onclick(e)
*/
$( document ).click(function(e) {
var ctx = canvas.getContext('2d');
var radius = Math.random() * 60 + 30;
ctx.beginPath();
ctx.arc(e.clientX, e.clientY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
$('#front').css({
'mask-image':"url(" + canvas.toDataURL("image/png")+ ")",
});
});#container {
position: absolute;
width: 300px;
height: 300px;
}
.white{
fill: white;
color: white;
background: blue;
}
.blue {
fill: blue;
color:blue;
background: white;
}
#circle {
margin-left: 100px;
margin-top: 50px;
}
#text {
text-align: center;
font-size: 60px;
font-weight: bolder;
margin-top: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class='white'>
<svg id="circle" width="50px" height="50px">
<circle cx="25px" cy="25px" r="25px"></circle>
</svg>
<div id="text">
HELLO WORLD!
</div>
</div>
Stack Overflow用户
发布于 2017-10-25 15:16:46
路径的解决方案如下：
var width = 300;
var height = 200;
var canvas = document.getElementById( "myCanvas" );
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF";
ctx.fillRect( 0, 0, width, height );
canvas.onmousemove = function( e ){
ctx.clearRect( 0, 0, width, height );
// counter-clockwise path
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.moveTo( 0, 0 );
ctx.lineTo( 0, height );
ctx.lineTo( width, height );
ctx.lineTo( width, 0 );
ctx.closePath();
// clockwise path
ctx.arc( e.clientX, e.clientY, 20, 0, 2 * Math.PI, false);
ctx.fill();
};#back {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
background: linear-gradient( to right, red , yellow);
z-index: 0;
}
#front {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
z-index: 1;
border: solid thin #000000;
}<div id="back"></div>
<div id="front">
<canvas id="myCanvas" width="300" height="200"/>
</div>
在这里看一看，了解为什么如果工作：HTML5画布中的掩蔽形状？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46935033
复制相关文章
相似问题
腾讯云开发者
