实现鼠标悬停动态揭示文本效果：Canvas与DOM元素层叠技巧-js教程-PHP中文网

实现鼠标悬停动态揭示文本效果：Canvas与DOM元素层叠技巧

DDD

发布： 2025-09-23 11:28:19

原创

384人浏览过

实现鼠标悬停动态揭示文本效果：Canvas与DOM元素层叠技巧

本文探讨了如何通过巧妙结合HTML Canvas绘图与DOM元素层叠，实现一种独特的鼠标悬停文本揭示效果。用户在白色背景上移动鼠标时，Canvas会绘制黑色飞溅物，这些飞溅物将逐步“擦亮”预先放置在Canvas上方的白色隐藏文本，创造出无需多个鼠标事件即可同步互动的视觉体验。

核心原理：元素层叠与视觉欺骗

实现这种“同时鼠标悬停”的动态揭示效果，并非真的需要同时触发两个独立的鼠标事件。其核心在于利用css的层叠上下文（z-index）和定位属性（position），将一个与背景色相同的文本元素放置在canvas元素的上方。当鼠标在canvas上移动时，canvas会绘制出与背景色形成对比的图案（例如黑色的飞溅物），这些图案实际上是在canvas层级上绘制的。由于canvas位于文本元素的下方，当黑色图案出现时，它们就充当了文本的背景，使得原本因与背景色相同而“隐形”的文本变得可见。

这种方法巧妙地利用了视觉感知，通过一个鼠标事件（在Canvas上移动）来同时影响两个视觉层：Canvas上的动态绘图和DOM元素上的文本显示。

HTML结构设置

为了实现上述效果，我们需要一个HTML文件，其中包含一个Canvas元素和一段需要被揭示的文本。关键在于文本元素需要通过CSS进行定位，使其能够覆盖在Canvas上方，并初始设置为与页面背景色相同的颜色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标揭示文本效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 防止滚动条出现 */
            background-color: white; /* 确保背景色为白色 */
        }
        canvas {
            display: block; /* 移除canvas底部空白 */
            position: absolute; /* 使canvas可以被其他元素覆盖 */
            top: 0;
            left: 0;
            z-index: 1; /* 确保canvas在文本下方 */
        }
        .revealing-text {
            color: white; /* 初始颜色与背景相同，使其隐形 */
            z-index: 10; /* 确保文本在canvas上方 */
            position: absolute; /* 绝对定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 精确居中 */
            font-family: sans-serif;
            font-size: 2em;
            white-space: nowrap; /* 防止文本换行 */
        }
    </style>
</head>
<body>
    <!-- 这是一个普通的标题，与效果无关 -->
    <h1 style="color: black; text-align: center; position: relative; z-index: 20;">RENA</h1>

    <!-- 需要被揭示的文本，初始为白色，位于Canvas上方 -->
    <span class="revealing-text"><h2>There's always more to see</h2></span>

    <!-- Canvas元素，用于绘制动态飞溅物 -->
    <canvas id="my-canvas"></canvas>

    <script src="script.js"></script>
</body>
</html>

登录后复制

在上述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代码中：

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

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绘图的基本原理，是创建此类动态和交互式网页效果的关键。

以上就是实现鼠标悬停动态揭示文本效果：Canvas与DOM元素层叠技巧的详细内容，更多请关注php中文网其它相关文章！