JavaScript onmousemove事件精度不足，如何提升鼠标采样率？

我有如下简单HTML文档：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <script>
        window.onmousemove = (e) => {
            console.log(e.clientX + ", " + e.clientY);
        }
    </script>
</body>
</html>

该代码本应在鼠标移动时记录其位置，但当我快速移动鼠标时，得到的点间隔非常大。以下是从左到右快速移动鼠标时的输出示例：

32, 178
40, 178
52, 178
75, 178
118, 178
175, 178
251, 178
340, 178
434, 178
526, 178
623, 178
720, 178
820, 178
920, 178
1020, 178
1114, 178
1192, 178
1252, 178
1298, 178

我需要获取更多鼠标指针位置采样，因为我打算开发一个支持鼠标自由画线的绘图应用。请问这是否可行，还是我应该放弃使用JavaScript？

完全不用放弃JavaScript，这个问题可以解决。浏览器mousemove事件的触发频率本身有限，快速移动时会跳过中间点，但我们可以通过两种方式实现平滑画线：

1. 插值补全中间点 #

记录上一次鼠标的位置，每次触发mousemove时，计算当前点与上一点之间的所有缺失点，把这些点也加入绘图数据，让线条连贯。

示例代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smooth Draw</title>
    <style>
        canvas { border: 1px solid #000; }
    </style>
</head>
<body>
    <canvas id="drawCanvas" width="1300" height="200"></canvas>
    <script>
        const canvas = document.getElementById('drawCanvas');
        const ctx = canvas.getContext('2d');
        let lastX = null;
        let lastY = null;
        let isDrawing = false;

        // 生成两点之间的所有中间点（Bresenham算法）
        function getLinePoints(x1, y1, x2, y2) {
            const points = [];
            const dx = Math.abs(x2 - x1);
            const dy = Math.abs(y2 - y1);
            const sx = x1 < x2 ? 1 : -1;
            const sy = y1 < y2 ? 1 : -1;
            let err = dx - dy;

            let x = x1;
            let y = y1;
            while (true) {
                points.push({x, y});
                if (x === x2 && y === y2) break;
                const e2 = 2 * err;
                if (e2 > -dy) {
                    err -= dy;
                    x += sx;
                }
                if (e2 < dx) {
                    err += dx;
                    y += sy;
                }
            }
            return points;
        }

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            lastX = e.clientX - canvas.offsetLeft;
            lastY = e.clientY - canvas.offsetTop;
        });

        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;
            const currentX = e.clientX - canvas.offsetLeft;
            const currentY = e.clientY - canvas.offsetTop;
            
            // 获取所有中间点并绘制
            const points = getLinePoints(lastX, lastY, currentX, currentY);
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            points.forEach(point => ctx.lineTo(point.x, point.y));
            ctx.stroke();

            lastX = currentX;
            lastY = currentY;
        });

        canvas.addEventListener('mouseup', () => isDrawing = false);
    </script>
</body>
</html>

2. 结合Pointer Events与requestAnimationFrame #

Pointer Events比传统鼠标事件更精准，配合requestAnimationFrame可以在每一帧都获取当前鼠标位置，进一步提升采样密度。

核心代码片段：

let rafId = null;
let currentX, currentY;
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('pointerdown', (e) => {
    currentX = e.clientX - canvas.offsetLeft;
    currentY = e.clientY - canvas.offsetTop;
    ctx.beginPath();
    ctx.moveTo(currentX, currentY);
    rafId = requestAnimationFrame(drawLoop);
});

function drawLoop() {
    ctx.lineTo(currentX, currentY);
    ctx.stroke();
    rafId = requestAnimationFrame(drawLoop);
}

canvas.addEventListener('pointermove', (e) => {
    currentX = e.clientX - canvas.offsetLeft;
    currentY = e.clientY - canvas.offsetTop;
});

canvas.addEventListener('pointerup', () => cancelAnimationFrame(rafId));

这两种方案都能有效解决快速移动鼠标时点间隔大的问题，完全不需要放弃JavaScript。插值补全是兼容性最好的方案，Pointer Events+requestAnimationFrame则能获得更流畅的体验，可根据需求选择。

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