Canvas添加遮罩：仅允许指定按钮可点击，如何实现？

嘿，我来帮你解决这个Canvas遮罩的问题！你想实现的是：用Canvas做全屏遮罩禁用大部分元素的点击，但让传入openOverlay的按钮保持可交互，之前尝试用ctx.clearRect裁剪遮罩对应按钮的区域却没成功，对吧？我来给你拆解问题并提供可行的方案。

为什么ctx.clearRect没起作用？ #

你之前的思路是对的——视觉上给遮罩挖个洞让按钮显示出来，但忽略了一个关键：Canvas元素本身是覆盖在按钮上层的。哪怕你用clearRect把遮罩画空了，点击那个区域时，事件还是会被Canvas拦截，根本传不到下面的按钮上。所以我们需要从事件处理或DOM层级入手解决。

方案一：调整DOM层级，让按钮在Canvas上层 #

这是最简单的方案，只要让按钮的层级比Canvas遮罩高，它就能直接接收点击事件，不需要额外处理Canvas的点击逻辑。

实现步骤：

1. 给Canvas遮罩设置固定定位和较低的z-index：

#mask-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; /* 确保覆盖其他元素 */
  background: rgba(0, 0, 0, 0.5);
}

2. 给目标按钮设置更高的z-index，确保它在Canvas上层：

#target-button {
  position: relative; /* 或fixed/absolute，只要能生效z-index */
  z-index: 1000; /* 比Canvas的z-index高 */
}

3. 用clearRect在遮罩上对应按钮的位置挖洞（视觉优化，让用户知道按钮可点击）：

const targetBtn = document.querySelector('#target-button');
const canvas = document.querySelector('#mask-canvas');
const ctx = canvas.getContext('2d');

// 适配窗口大小
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawMask();
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// 绘制遮罩并挖洞
function drawMask() {
  ctx.fillStyle = 'rgba(0,0,0,0.5)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 获取按钮的位置和尺寸
  const btnRect = targetBtn.getBoundingClientRect();
  // 清除按钮区域的遮罩
  ctx.clearRect(btnRect.left, btnRect.top, btnRect.width, btnRect.height);
}

方案二：通过Canvas点击事件判断，手动触发按钮交互 #

如果你的DOM结构不允许调整层级，可以通过监听Canvas的点击事件，判断点击位置是否在按钮范围内，再手动触发按钮的点击逻辑。

实现代码：

const targetBtn = document.querySelector('#target-button');
const canvas = document.querySelector('#mask-canvas');
const ctx = canvas.getContext('2d');

// 初始化Canvas尺寸和遮罩
function initMask() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.fillStyle = 'rgba(0,0,0,0.5)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
initMask();
window.addEventListener('resize', initMask);

// 监听Canvas点击事件
canvas.addEventListener('click', (e) => {
  const btnRect = targetBtn.getBoundingClientRect();
  // 获取点击位置相对于页面的坐标
  const clickX = e.clientX;
  const clickY = e.clientY;
  
  // 判断是否点击在按钮区域内
  const isClickOnBtn = 
    clickX >= btnRect.left && 
    clickX <= btnRect.left + btnRect.width &&
    clickY >= btnRect.top && 
    clickY <= btnRect.top + btnRect.height;
  
  if (isClickOnBtn) {
    // 手动触发按钮的点击事件
    targetBtn.click();
    // 如果需要执行openOverlay逻辑，也可以直接调用：openOverlay();
  }
  // 非按钮区域的点击直接忽略，其他元素不会收到事件
});

这个方案里，Canvas会拦截所有点击，只有当点击位置落在按钮范围内时，才会触发按钮的交互，完美实现你的需求。

内容的提问来源于stack exchange，提问作者Alon Shmiel