显示鼠标运动轨迹js代码

要在网页上显示鼠标的运动轨迹，可以使用JavaScript来监听鼠标移动事件，并在页面上绘制出鼠标的路径。以下是一个简单的示例代码，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Trail</title>
    <style>
        #trail {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 确保轨迹层不会干扰鼠标事件 */
        }
    </style>
</head>
<body>
    <div id="trail"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', () => {
    const trail = document.getElementById('trail');
    let points = [];

    document.addEventListener('mousemove', (event) => {
        points.push({ x: event.clientX, y: event.clientY });

        // 限制点的数量以避免性能问题
        if (points.length > 100) {
            points.shift();
        }

        redraw();
    });

    function redraw() {
        trail.innerHTML = ''; // 清空之前的轨迹
        const pathData = points.map((point, index) => {
            return `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`;
        }).join(' ');

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        path.setAttribute('stroke', 'blue');
        path.setAttribute('stroke-width', '2');
        path.setAttribute('fill', 'none');
        trail.appendChild(path);
    }
});

解释

HTML部分：创建一个div元素用于显示鼠标轨迹，并引入JavaScript文件。
JavaScript部分：
- 监听DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 添加mousemove事件监听器，每次鼠标移动时记录当前坐标。
- 使用一个数组points来存储鼠标的坐标点，并限制其长度以避免内存占用过多。
- redraw函数用于重新绘制轨迹，每次鼠标移动后都会调用此函数。
- 创建SVG路径元素来绘制轨迹线，并将其添加到轨迹容器中。