前言

我们在平常做业务中，在功能变更，或者有大的改动时，经常会用到新手引导功能，虽然有很多库可以使用，但是有时候很简单的需求，没必要引入库，本文用最简化代码，实现一下新手引导的遮罩部分，主要是总结实现思想

主要难点就是，一般遮罩层级要高于需要页面元素，但是如何让页面高亮的元素突破遮罩的限制，是主要要解决的问题

以下的代码都将用最简化的方式实现，写死元素的宽高，主要重点是实现思想上：

方式一：遮罩拼接

下面是 Antd Tour 组件的实现方式，我们通过更改背景色，加以区分

从图中可以看出，让元素突破遮罩的方式是，不突破，改而让遮罩分成上下左右四块，所以，第一种方式就是通过元素拼接遮罩，实现代码如下：

  <style>


    * {

      margin: 0;

      padding: 0;

    }

    .box {

      width: 100vw;

      height: 100vh;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .button {

      position: relative;

      z-index: 1;

      width: 400px;

      height: 100px;

    }



    .mask {
      width: 100vw;
      height: 100vh;
      position: absolute;
      inset: 0;
    }
    .mask .horizon {
      display: flex;
      justify-content: space-between;
    }

    .mask .horizon div {
      height: 100vh;
      width: calc(50vw - 200px);
      background-color: rgba(255, 0, 255, 0.3);
    }

    .mask .vertival {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      top: 0;
      height: 100vh;
    }

    .mask .vertival div {
      width: 100vw;
      height: calc(50vh - 50px);
      background-color: rgba(255, 0, 0, 0.3);
    }
  </style>
  <body>
    <div class="box">
      <button class="button">新手指导</button>
    </div>
    <!-- 拼接实现遮罩 -->
    <div class="mask">
      <div class="horizon">
        <div></div>
        <div></div>
      </div>
      <div class="vertival">
        <div></div>
        <div></div>
      </div>
    </div>
  </body>

效果如下

方式二：通过 border 的方式实现

上面代码太多了，下面这种方式就简单太多了，只要对当前元素通过伪元素的方式添加很宽很高的变宽即可

方式三：通过给元素增加阴影

增加边框可以，同理增加阴影肯定也可以了，代码与效果如下

方式四：使用 css 的 clip-path

这种方式是通过裁剪的方式，将元素漏出来，需要计算的点比较多，大致就是计算一个回字

关于clip-path如果不熟，不知道怎么设置点的位置，可以在这个网站找思路，立马有很多预设的图型，我们只需要找到接近的那个。改一下数据即可
bennettfeely.com/clippy/

如图，我们发现这个形状，跟我们要设置遮罩的区域很像，然后分析一下他的实现，顶点的顺序如下

位置3和位置8，两个点其实是重合起来了，我把它分开，这样更容易理解执行顺序

明白了执行顺序，与实现原理，代码实现就比较简单了

代码如下：

  <style>


    .mask {
      position: absolute;

      inset: 0;

      background-color: rgb(210, 196, 196);
      clip-path: polygon(
        0% 0%,
        0% 100%,
        calc(50vw - 200px) 100%,
        calc(50vw - 200px) calc(50vh - 50px),
        calc(50vw + 200px) calc(50vh - 50px),
        calc(50vw + 200px) calc(50vh + 50px),
        calc(50vw - 200px) calc(50vh + 50px),
        calc(50vw - 200px) 100%,
        100% 100%,
        100% 0%
      );
    }

  </style>

  <body>

    <div class="box">

      <button class="button">新手指导</button>

    </div>

    <div class="mask"></div>
  </body>

方式五：复制新元素放在遮罩位置

这种方式的实现就是不考虑元素与遮罩的关系，直接copy一个新的元素，覆盖原有元素

核心代码如下：

  <style>


   .mask {
      position: absolute;

      inset: 0;

      background-color: rgba(191, 223, 183, 0.5);
    }

    .mask .button {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 400px;
      height: 100px;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

  </style>

  <body>

    <div class="box">

      <button class="button">新手指导</button>

    </div>

    <div class="mask">
      <button class="button">新手指导 copy</button>
    </div>
  </body>

实现方式六 canvas

这种其实不是纯css 实现了，需要用到js，思想就是画一个整屏的元素，然后在擦除元素位置，核心代码如下

<style>
    * {

      margin: 0;

      padding: 0;

    }

    .box {

      width: 100vw;

      height: 100vh;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .button {

      position: relative;

      z-index: 1;

      width: 400px;

      height: 100px;

    }



    canvas {
      position: absolute;
      top: 0;
    }
  </style>
  <body>
    <div class="box">
      <button class="button">新手指导</button>
    </div>
    <canvas id="canvas"></canvas>
  </body>

  <script>
    const button = document.querySelector(".button");
    const rect = button.getBoundingClientRect();
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.setAttribute("width", window.innerWidth + "px");
    canvas.setAttribute("height", window.innerHeight + "px");
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
    ctx.clearRect(rect.left, rect.top, rect.width, rect.height);
  </script>