如何制作不影响页面可用性的鼠标跟随遮罩脚本？

这个问题我之前也遇到过！核心原因就是全屏覆盖的canvas拦截了所有鼠标事件，导致下方页面元素无法响应点击、 hover 等交互。给你几个实用的解决方案，按需选择：

方案一：Canvas + pointer-events: none （保留Canvas方案） #

这是最贴近你原有实现的修改方案，只需要添加一行CSS并调整事件监听对象：

实现步骤： #

1. 给Canvas添加CSS属性，让它不拦截鼠标事件：

#cursorCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none; /* 关键：让Canvas穿透鼠标事件 */
}

2. 将鼠标事件监听从Canvas切换到document，确保仍能跟踪鼠标位置：

const canvas = document.getElementById('cursorCanvas');
const ctx = canvas.getContext('2d');

// 初始化Canvas尺寸
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

let mouseX = 0;
let mouseY = 0;

// 监听document的mousemove事件，而非Canvas
document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 绘制逻辑和原方案一致
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制全屏半透明遮罩
  ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 清除鼠标圆圈区域（显示下方内容）
  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 100, 0, Math.PI * 2);
  ctx.fill();
  
  // 恢复默认合成模式
  ctx.globalCompositeOperation = 'source-over';
  
  requestAnimationFrame(draw);
}
draw();

优点： #

• 保留Canvas的灵活性，可扩展复杂动画（比如渐变圆圈边框、缩放动画）
• 改动极小，适配原有代码

方案二：纯CSS + JS（轻量替代方案） #

如果不需要复杂的Canvas特效，用CSS的clip-path实现会更简洁，性能也更好：

实现步骤： #

1. 创建全屏遮罩层：

<div id="mouseMask"></div>
<!-- 页面原有内容 -->

2. 遮罩层的CSS：

#mouseMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  pointer-events: none; /* 穿透鼠标事件 */
  transition: clip-path 0.1s ease; /* 可选：让圆圈跟随更平滑 */
}

3. JS动态更新遮罩的裁剪区域：

const mask = document.getElementById('mouseMask');

document.addEventListener('mousemove', (e) => {
  const circleRadius = 100; // 可自定义圆圈大小
  mask.style.clipPath = `circle(${circleRadius}px at ${e.clientX}px ${e.clientY}px)`;
});

优点： #

• 代码更简洁，无需处理Canvas的尺寸和绘制逻辑
• 性能消耗更低，适合简单的高亮需求

方案对比 #

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