如何实现全屏Canvas背景仅在可拖拽遮罩元素区域可见？

针对你的需求，推荐两种高效可行的方案，解决之前mask/clip-path尝试失败的问题，同时支持拖拽元素同步更新Canvas显示区域：

方案一：CSS Mask + DOM拖拽元素（简洁高效） #

利用CSS element()函数将拖拽的DOM元素作为Canvas的遮罩，无需操作Canvas绘制逻辑，性能最优。

实现步骤 #

1. 布局结构：全屏Canvas底层，上层放置遮罩容器和可拖拽元素
2. 核心CSS：通过mask: element(#mask-container)让Canvas仅显示遮罩容器内元素的区域
3. 拖拽逻辑：监听元素的鼠标事件，实时更新位置

代码示例 #

<canvas id="bg-canvas"></canvas>
<div id="mask-container">
  <div class="mask-item" style="left: 100px; top: 100px; width: 200px; height: 200px;"></div>
  <div class="mask-item" style="left: 400px; top: 200px; width: 150px; height: 150px;"></div>
</div>

body { margin: 0; overflow: hidden; }
#bg-canvas {
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* 关键：引用遮罩容器作为Canvas的遮罩 */
  mask: element(#mask-container);
  -webkit-mask: element(#mask-container); /* 兼容webkit内核浏览器 */
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
#mask-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 让鼠标事件穿透到拖拽元素 */
}
.mask-item {
  background: #000; /* 仅需不透明，颜色不影响遮罩效果 */
  position: absolute;
  cursor: move;
  pointer-events: auto; /* 确保拖拽元素能捕获鼠标事件 */
}

// 绘制Canvas渐变背景
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#ff6b6b');
gradient.addColorStop(1, '#4ecdc4');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 实现拖拽逻辑
const maskItems = document.querySelectorAll('.mask-item');
maskItems.forEach(item => {
  let isDragging = false;
  let offsetX, offsetY;

  item.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - item.offsetLeft;
    offsetY = e.clientY - item.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    item.style.left = `${e.clientX - offsetX}px`;
    item.style.top = `${e.clientY - offsetY}px`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
});

为什么之前mask可能失败？ #

• 未添加浏览器前缀（如-webkit-mask）
• 未设置mask-mode: alpha确保遮罩基于元素的透明度生效
• 遮罩容器未设置全屏尺寸导致遮罩范围错误

方案二：Canvas合成模式 + 拖拽同步（兼容性更强） #

通过Canvas的globalCompositeOperation属性手动绘制遮罩，适合需要自定义遮罩形状（如圆形、多边形）或兼容性要求更高的场景。

实现步骤 #

1. 布局结构：全屏Canvas底层，上层放置仅作为视觉提示的拖拽元素
2. 绘制逻辑：先画Canvas背景，再用destination-in合成模式绘制遮罩区域，仅保留交集部分
3. 拖拽同步：拖拽元素时实时重绘Canvas，同步遮罩位置

代码示例 #

<canvas id="bg-canvas"></canvas>
<div class="drag-item" style="left: 100px; top: 100px; width: 200px; height: 200px;"></div>
<div class="drag-item" style="left: 400px; top: 200px; width: 150px; height: 150px;"></div>

body { margin: 0; overflow: hidden; }
#bg-canvas {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.drag-item {
  position: fixed;
  border: 2px solid #fff; /* 仅作为拖拽的视觉提示，背景透明 */
  cursor: move;
  box-sizing: border-box;
}

const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
const dragItems = document.querySelectorAll('.drag-item');

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

// 绘制Canvas背景与遮罩
function drawCanvasWithMask() {
  // 1. 绘制渐变背景
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, '#ff6b6b');
  gradient.addColorStop(1, '#4ecdc4');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 2. 设置合成模式：仅保留后续绘制区域与已有内容的交集
  ctx.globalCompositeOperation = 'destination-in';

  // 3. 绘制遮罩区域（与拖拽元素位置大小同步）
  dragItems.forEach(item => {
    const rect = item.getBoundingClientRect();
    ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
  });

  // 4. 恢复默认合成模式
  ctx.globalCompositeOperation = 'source-over';
}

// 拖拽逻辑
dragItems.forEach(item => {
  let isDragging = false;
  let offsetX, offsetY;

  item.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - item.offsetLeft;
    offsetY = e.clientY - item.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    item.style.left = `${e.clientX - offsetX}px`;
    item.style.top = `${e.clientY - offsetY}px`;
    // 拖拽时实时重绘Canvas
    drawCanvasWithMask();
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
});

方案对比 #

关于clip-path的说明 #

clip-path更适合静态固定形状的遮罩，若要实现多元素拖拽动态更新，需要手动拼接路径字符串，逻辑繁琐且维护成本高，因此不推荐作为此需求的解决方案。

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