时间戳

首页 > 解决方案 > 如何通过使用 CSS 将画布作为蒙版在覆盖 div 上打孔

javascript - 如何通过使用 CSS 将画布作为蒙版在覆盖 div 上打孔

问题描述

我绘制了一个包含以下内容的画布：

在此处输入图像描述

如何正确地将画布设置为 CSS 中整个 div 的剪贴蒙版？

这是我的代码：

var punchHole = function(x, y, r, ctx){
    ctx.save()
    ctx.arc(x, y, r, 0, Math.PI * 2, false)
    ctx.clip()
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.restore();
}

function draw() {
    var ctx = document.getElementById('splash-canvas').getContext('2d');
    var circles = [{x: 50, y: 50, r: 50}, {x: 75, y: 75, r: 50}];
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (var i=0; i<circles.length; i++){
        punchHole(circles[i].x, circles[i].y, circles[i].r, ctx)
    }
}
window.onload = draw;
.aside, .content, canvas{
  left:0;
  top:0;
  position:absolute;
  height: 100vh;
  width: 100vw;
  display: block;
}
.content{
  z-index:2;
  font-weight:bold;
  color:red;
  background:yellow;
}
.aside{
  color:green;
  z-index:3;
  height: 100vh;
  width: 100vw;
  display: block;
  mask: url(#splash-canvas);
}
canvas{
  z-index:5;
}
.hidden{
  overflow:hidden;
  width:0;
}
<div class="hidden"><canvas id="splash-canvas"  width="150" height="150"></canvas></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="aside">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

可以看出，画布被应用为蒙版，但它也显示自己并将内容隐藏在它蒙版的图层中。不知道我做错了什么。我期望发生的是黑色区域应该替换为.aside图层的内容（绿色文本），并且.content图层的内容（红色文本）应该通过孔可见（这已经发生了）。我尝试将画布存储在隐藏的 div 中（溢出：隐藏），但没有骰子。我还尝试将画布隐藏在屏幕上其他所有内容的后面，但它仍然显示在顶部。

标签： javascriptcsscanvas

解决方案

你真的不需要那么多代码或画布。你想要的可以通过使用渐变的背景着色来实现。

.content{
  font-weight:bold;
  font-size:30px;
  color:#0000;
  background:                                   /* position */
   radial-gradient(farthest-side,red 98%,#0000) 20px  20px,
   radial-gradient(farthest-side,red 98%,#0000) 160px 100px,
   green;
  background-size:200px 200px; /* size of the circles */
  background-repeat:no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

推荐阅读