如何用Canvas和CSS实现鼠标轨迹揭示隐藏文字的效果

基于Canvas鼠标轨迹的文本揭示效果，核心思路是在底层放一段普通文字，上层盖一个Canvas画布并填充颜色，当鼠标移动时用Canvas擦除对应区域，从而露出下面的文字。CSS负责把两层叠在一起并控制显示层级。

一、HTML结构

我们需要一个容器，里面包含一个用来显示文字的层和一个覆盖其上的Canvas元素。

<div class="reveal-box">
  <p class="text-layer">这是被隐藏的神秘文字</p>
  <canvas class="canvas-layer" width="600" height="200"></canvas>
</div>

二、CSS层叠与定位

通过position:relative让容器成为定位上下文，两个子层都使用position:absolute铺满容器，再利用z-index控制谁在上层。

.reveal-box {
  position: relative;
  width: 600px;
  height: 200px;
}
.text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1;
}
.canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

三、Canvas绘制与擦除

先用纯色填满Canvas作为遮挡层，然后监听鼠标移动，在轨迹上用globalCompositeOperation设置为destination-out来擦除像素。

var canvas = document.querySelector('.canvas-layer');
var ctx = canvas.getContext('2d');
// 填充遮挡层
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener('mousemove', function(e) {
  var rect = canvas.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  // 设置擦除模式
  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.fill();
});

四、关键点说明

• Canvas尺寸要在标签上直接写宽高，用CSS拉伸会导致坐标不准。
• mousemove里取坐标要减去画布在页面中的偏移。
• CSS里上层Canvas必须盖住文字层，擦除后才看得见底下内容。

五、小结

这种效果把Canvas的像素操作与CSS的定位层叠结合，代码量不大却很吸引人。你可以调整擦除半径、遮挡颜色，或加上触摸事件支持，让它在移动端也能工作。

CanvasCSS定位鼠标轨迹修改时间：2026-07-27 20:30:21