2

我正在制作一个网站，我希望它是一个白页，您可以标记它以使另一个图像出现在下面。因此，当您单击时，您会打孔。像这个例子： 在此处输入图像描述

因此，当我单击时，我设法在背景中有一个随机图像，这对我想要的东西来说很好，并且能够.append()打孔。 但我不知道如何做面具的事情，我一直在网上挖掘一些东西和帮助，并设法让它在某些情况下工作，但不是那种......

应该是这样的（我猜）：

  • 背景中的图像
  • 前面的白色形状
  • 星形在白色形状上打洞

现在，我唯一能做的就是除了一个更大的打孔器（这是我的原始图像）之外的图片，但是当我点击它时不会打孔，它只是添加了图章。

这是代码：

var images = ["https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png", "https://ichef.bbci.co.uk/news/1024/cpsprodpb/151AB/production/_111434468_gettyimages-1143489763.jpg"];


$(document.body).click(function(c) {
  var tw = 100 / 2;
  var th = 30 / 2;
  var x = Math.floor((Math.random() * images.length));
    document.getElementById('random').src = images[x];
  $("#random").css({
    position: 'absolute',
    display: "block",
    left: 0,
    top: 0
  });
    var tw = 50 / 2;
    var th = tw;
  $('#holepunch:last').clone().appendTo(this).css({
    position: 'absolute',
    display: "block",

    left: c.pageX - tw - $(this).position().left,
    top: c.pageY - th + $(this).scrollTop()
});
});

     
body{
  background: lightgrey;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  opacity: 1;
}
.fauxbody{
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: white;
  top: 0;
  left: 0;

  -webkit-mask:
    -moz-element(#holepunch) 1vw 1vh no-repeat,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

#random{
   z-index: -100;
  width: 100vw;
  height: auto;
}

#holepunch{
  width: 50px;
  height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <img id="random">
  <div class ="fauxbody">

    <img id="holepunch" src="https://oshi.at/iimtXg/Jqtz.png">
    </div>
</body>

4

2 回答 2

1

这是一个使用多个掩码和 CSS 变量的想法。诀窍是在每次点击时添加一个额外的图层。我删除了与后台生成相关的代码，因为它无关紧要并且很容易添加

var mask = "";
w = 60;
h = 60;

document.documentElement.addEventListener("click", function (c) {
    mask+="url(https://i.ibb.co/FzmCjLL/Jqtz.png)"+(c.pageX-w/2)+"px "+(c.pageY-h/2)+"px/"+w+"px "+h+"px no-repeat,";
   document.documentElement.style.setProperty("--mask", mask)
});
html {
  background:url(https://picsum.photos/800/800) center/cover;
}

html::before {
  content:"";
  position: fixed;
  background-color: #f3f3f3;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  -webkit-mask: 
     var(--mask)
     linear-gradient(#fff 0 0);
  -webkit-mask-reepat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

也像下面没有mask-composite：

var mask = "";
w = 60;
h = 60;

document.documentElement.addEventListener("click", function (c) {
    if(mask!="")
      mask+=",";
    mask+="url(https://i.ibb.co/FzmCjLL/Jqtz.png)"+(c.pageX-w/2)+"px "+(c.pageY-h/2)+"px/"+w+"px "+h+"px no-repeat";
   document.documentElement.style.setProperty("--mask", mask)
});
html::before {
  content:"";
  position: fixed;
  background:url(https://picsum.photos/800/800) center/cover;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  -webkit-mask:var(--mask,linear-gradient(transparent 0 0));
}

于 2020-12-06T15:21:45.690 回答
-1

我会尝试使用具有白色背景的画布并添加一个 mouseclick 事件侦听器，它会剪切画布。我发现另一个关于堆栈溢出的问题可以帮助你：

HTML5 从以前绘制的笔画中剪出圆圈

于 2020-12-06T14:32:41.057 回答