核心原理：元素层叠与视觉欺骗
实现这种“同时鼠标悬停”的动态揭示效果，并非真的需要同时触发两个独立的鼠标事件。其核心在于利用css的层叠上下文（z-index）和定位属性（position），将一个与背景色相同的文本元素放置在canvas元素的上方。当鼠标在canvas上移动时，canvas会绘制出与背景色形成对比的图案（例如黑色的飞溅物），这些图案实际上是在canvas层级上绘制的。由于canvas位于文本元素的下方，当黑色图案出现时，它们就充当了文本的背景，使得原本因与背景色相同而“隐形”的文本变得可见。
这种方法巧妙地利用了视觉感知，通过一个鼠标事件（在Canvas上移动）来同时影响两个视觉层：Canvas上的动态绘图和DOM元素上的文本显示。
HTML结构设置
为了实现上述效果，我们需要一个HTML文件，其中包含一个Canvas元素和一段需要被揭示的文本。关键在于文本元素需要通过CSS进行定位，使其能够覆盖在Canvas上方，并初始设置为与页面背景色相同的颜色。
鼠标揭示文本效果
RENA
There's always more to see
在上述HTML中：
- 我们添加了一个span元素，并为其设置了revealing-text类。
- 通过CSS，我们将.revealing-text的color设置为white，使其在白色背景上不可见。
- position: absolute和z-index: 10确保了文本元素浮动在Canvas之上。top: 50%; left: 50%; transform: translate(-50%, -50%);用于将文本精确居中。
- Canvas元素设置z-index: 1，确保它在文本下方。
JavaScript动态绘图：黑色飞溅物
JavaScript代码负责初始化Canvas，监听鼠标移动事件，并根据鼠标位置绘制动态的黑色飞溅物。这些飞溅物将构成揭示文本的“墨迹”。
// script.js
const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
// 设置Canvas尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 存储所有飞溅物（Atom）对象的数组
let atoms = [];
// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e){
// 每次鼠标移动，生成20个新的飞溅物
for (let i = 0; i < 20; i++) {
atoms.push(new Atom(e.x, e.y));
}
});
// 动画循环函数
const animate = () => {
// 清空Canvas（或绘制半透明背景以实现拖尾效果）
// ctx.clearRect(0, 0, canvas.width, canvas.height); // 如果需要完全清除，则取消注释
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'; // 绘制半透明白色背景，形成拖尾效果
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 遍历所有飞溅物，更新并绘制它们
atoms.forEach((atom, index) => {
atom.draw();
atom.updateSpeed();
atom.updateSize();
// 如果飞溅物半径过小，则从数组中移除
if (atom.radius < 0.3){
atoms.splice(index, 1);
}
});
// 请求下一帧动画
requestAnimationFrame(animate);
}
// 启动动画
animate();
// 飞溅物（Atom）类定义
class Atom{
constructor(x,y){
this.x = x; // 初始X坐标
this.y = y; // 初始Y坐标
this.radius = Math.random() * 8 + 2; // 随机半径
this.speedX = Math.random() * 4 - 2; // 随机X轴速度 (-2到2)
this.speedY = Math.random() * 4 - 2; // 随机Y轴速度 (-2到2)
this.color = 'black'; // 飞溅物颜色
}
// 更新飞溅物位置
updateSpeed(){
this.x += this.speedX;
this.y += this.speedY;
}
// 减小飞溅物半径，使其逐渐消失
updateSize(){
this.radius -= 0.1;
}
// 绘制飞溅物
draw(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 监听窗口大小变化，调整Canvas尺寸
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});在上述JavaScript代码中：
- canvas.addEventListener('mousemove', ...)：当鼠标在Canvas上移动时，会创建一系列新的Atom对象，并将其添加到atoms数组中。
- Atom类：定义了每个飞溅物的属性（位置、大小、速度）和行为（更新位置、更新大小、绘制）。
- animate()函数：这是一个递归调用的动画循环，它会：
- 每次绘制一个半透明的白色矩形覆盖整个Canvas，这会产生一个拖尾效果，使得旧的飞溅物逐渐淡出，而不是立即消失。
- 遍历atoms数组，更新每个飞溅物的位置和大小，并重新绘制。
- 当飞溅物的半径小于某个阈值时，将其从数组中移除，以优化性能。
- 使用requestAnimationFrame来确保动画流畅且与浏览器刷新率同步。
效果实现与注意事项
当用户将鼠标移动到页面上时，JavaScript会在Canvas上绘制黑色的飞溅物。由于这些飞溅物是绘制在Canvas上的，而Canvas又位于白色文本的下方（通过z-index控制），所以当黑色飞溅物出现在文本后面时，原本与白色背景融为一体的白色文本就会被黑色飞溅物“衬托”出来，从而变得可见。
关键注意事项：
- 层叠顺序（z-index）：确保文本元素的z-index高于Canvas元素的z-index。
- 定位（position）：文本元素和Canvas元素都需要设置为position: absolute或position: relative，以便z-index属性能够生效。
- 颜色匹配：初始时，文本颜色必须与页面背景色完全一致，才能实现“隐形”效果。
- Canvas清除与拖尾：在animate函数中，通过绘制半透明背景（ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'; ctx.fillRect(...)）来制造飞溅物的拖尾效果。如果希望飞溅物立即消失，可以使用ctx.clearRect(0, 0, canvas.width, canvas.height);来完全清除每一帧的Canvas。
- 性能优化：Atom的数量和更新频率会影响性能。本例中通过限制每次鼠标移动生成的Atom数量和移除过小的Atom来管理性能。对于更复杂的动画，可能需要进一步优化。
- 响应式设计：通过监听window.resize事件来调整Canvas的尺寸，确保在不同屏幕尺寸下都能正常显示。
- 可访问性：这种视觉效果可能不适用于所有用户，特别是那些使用屏幕阅读器或有视觉障碍的用户。在实际应用中，应考虑提供备用文本或功能。
总结
通过巧妙地利用HTML、CSS和JavaScript的特性，我们可以在不依赖复杂事件管理的情况下，实现一个引人入胜的鼠标悬停揭示文本效果。这种方法强调了前端开发中视觉层叠和动态绘图的强大组合，为用户界面带来了更丰富的交互体验。理解并掌握元素层叠和Canvas绘图的基本原理，是创建此类动态和交互式网页效果的关键。
