带鼠标交互的简易JavaScript绘图应用鼠标位置未定义问题求助

嘿，作为JavaScript新手能写出这样的绘图代码已经超棒啦！你怀疑getMousePos()有问题完全正确，咱们一步步拆解问题，把所有小bug都修好，让你的绘图功能正常跑起来～

核心问题分析与修复 #

1. getMousePos()函数未接收事件参数 #

你现在的getMousePos()里直接用了event，但这个event不是当前鼠标事件的专属对象（现代浏览器里甚至不存在全局event），所以会导致计算出的x和y变成undefined。

修复方法：给函数添加参数接收事件对象，确保拿到当前鼠标事件的坐标：

function getMousePos(event) { // 接收事件参数
  const rect = c.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}

2. 调用getMousePos()时未传递事件 #

在mouseDown和mouseMove函数里，你调用getMousePos()时没传事件对象，导致函数还是拿不到正确的鼠标位置。

修复方法：修改事件处理函数，把触发事件时的event传进去：

function mouseDown(event) { // 接收event参数
  drag = true;
  const mousePos = getMousePos(event); // 传递事件对象
  draw(mousePos.x, mousePos.y, false);
}

function mouseMove(event) { // 接收event参数
  if(drag){
    const mousePos = getMousePos(event); // 传递事件对象
    draw(mousePos.x, mousePos.y, true);
    console.log(mousePos.x); // 现在能正常打印x坐标啦
  }
}

3. 未初始化lastX和lastY变量 #

第一次调用draw()时，lastX和lastY还没定义，会导致绘图逻辑报错。

修复方法：在代码开头声明并初始化这两个变量，顺便把drag也初始化：

let lastX = 0;
let lastY = 0;
let drag = false; // 避免未定义导致的意外报错

4. 外层if(spacepress==false)的逻辑问题 #

你把整个绘图代码包裹在这个条件里，但如果spacepress没被正确初始化（比如默认是undefined），条件会不成立，导致init()根本不会执行。

修复建议：给spacepress设初始值，同时监听空格键事件来切换绘图状态：

// 初始化空格键状态
let spacepress = false;

// 监听空格键按下，禁用绘图
document.addEventListener('keydown', (e) => {
  if(e.code === 'Space') {
    spacepress = true;
    c.removeEventListener('mousedown', mouseDown);
    c.removeEventListener('mouseup', mouseUp);
    c.removeEventListener('mousemove', mouseMove);
  }
});

// 监听空格键松开，重新启用绘图
document.addEventListener('keyup', (e) => {
  if(e.code === 'Space') {
    spacepress = false;
    init();
  }
});

完整修复后的代码 #

// 初始化全局变量
let lastX = 0;
let lastY = 0;
let drag = false;
let spacepress = false;
// 请替换成你的canvas元素ID
const c = document.getElementById('your-canvas-id');
const ctx = c.getContext('2d');

// 空格键状态切换逻辑
document.addEventListener('keydown', (e) => {
  if(e.code === 'Space') {
    spacepress = true;
    c.removeEventListener('mousedown', mouseDown);
    c.removeEventListener('mouseup', mouseUp);
    c.removeEventListener('mousemove', mouseMove);
  }
});

document.addEventListener('keyup', (e) => {
  if(e.code === 'Space') {
    spacepress = false;
    init();
  }
});

function init(){ 
  c.addEventListener('mousedown', mouseDown, false);
  c.addEventListener('mouseup', mouseUp, false);
  c.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(event) { 
  drag = true;
  const mousePos = getMousePos(event);
  draw(mousePos.x, mousePos.y, false);
}

function mouseUp(){ 
  drag = false;
}

function getMousePos(event) { 
  const rect = c.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}

function mouseMove(event) { 
  if(drag){
    const mousePos = getMousePos(event);
    draw(mousePos.x, mousePos.y, true);
    console.log(mousePos.x); // 现在能正常打印啦
  }
}

function draw(x,y,drag){ 
  if (drag){
    ctx.beginPath();
    ctx.strokeStyle = "#537c38";
    ctx.lineWidth = 20;
    ctx.lineJoin = "round";
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
  }
  lastX = x;
  lastY = y;
}

// 初始状态启用绘图
if(!spacepress) {
  init();
}

新手小贴士 #

• 永远记得初始化变量，避免出现undefined的情况；
• 事件处理函数里的event对象是当前事件的关键信息，一定要正确传递和使用；
• 调试时多用console.log()打印变量，像你之前排查getMousePos.x的方法就非常棒～

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