Canvas绘图线条显示为点状问题求助：快速移动鼠标异常

你的代码核心问题是：每次鼠标移动时，都是从当前坐标画到当前坐标，本质上只画了一个点。快速移动鼠标时，mousemove事件触发的坐标间隔大，这些点就分散开；缓慢移动时间隔小，点连起来看起来像线条。

关键修改点： #

• 记录上一次的鼠标坐标，每次移动时连接上次坐标和当前坐标
• 修正canvas坐标偏移（避免页面布局导致的坐标错误）
• 优化线条样式的设置时机，减少重复操作

修改后的完整代码： #

const ctx = canvas.getContext('2d');

let draw = false;
let lastX, lastY;
const lineWidth = 15;

// 初始化线条样式，只执行一次
ctx.lineWidth = lineWidth;
ctx.lineCap = "round";

document.addEventListener('mousedown', (e) => {
    draw = true;
    // 鼠标按下时获取canvas的位置偏移，计算正确的起始坐标
    const rect = canvas.getBoundingClientRect();
    lastX = e.clientX - rect.left;
    lastY = e.clientY - rect.top;
});

document.addEventListener('mouseup', () => {
    draw = false;
});

document.addEventListener('mousemove', startDrawing);

function startDrawing(e) {
    if (!draw) return;

    const rect = canvas.getBoundingClientRect();
    const currentX = e.clientX - rect.left;
    const currentY = e.clientY - rect.top;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY); // 从上次的位置开始
    ctx.lineTo(currentX, currentY); // 画到当前位置
    ctx.stroke();

    // 更新上次坐标，为下一次绘制做准备
    lastX = currentX;
    lastY = currentY;
}

额外说明： #

• 使用getBoundingClientRect()是因为clientX/clientY是相对于浏览器视口的坐标，而canvas的绘图坐标是自身的相对坐标，需要做偏移修正
• 把线条样式设置移到初始化阶段，避免每次鼠标移动都重复设置，能小幅提升性能

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