HTML5 Canvas中验证鼠标位置是否处于旋转矩形内的问题排查

核心错误点 #

• mousedown事件中错误覆盖了矩形中心坐标
  你在mousedown的判断逻辑里写了originX = x + width/2; originY = y + height/2，这里的x/y是鼠标点击的坐标，不是绘制矩形时的左上角坐标xCoord/yCoord，直接导致碰撞检测的原点完全错位。
• 未全局存储矩形的左上角坐标
  你在drawLine函数中定义的xCoord/yCoord没有声明为全局变量，后续碰撞检测时无法拿到矩形的实际位置。
• 碰撞检测函数缺少默认返回值
  clickedOnRectangle函数只有点击命中时才返回true，未命中时没有返回false，会得到undefined，导致逻辑判断异常。

修复步骤 #

1. 首先在全局变量声明部分新增xCoord、yCoord和旋转角度r的定义，避免隐式全局变量问题：

// 原有全局变量后追加
let xCoord = 0;
let yCoord = 0;
let r = 0;

2. 删除mousedown事件中错误的origin赋值代码：

// 删掉这两行错误代码
originX = x + width/2;
originY = y + height/2;

3. 给clickedOnRectangle函数添加默认返回false的逻辑：

function clickedOnRectangle(x,y) {
  // 原有计算逻辑保持不变
  if (x2 > -0.5 * width && x2 < 0.5 * width && y2 > -0.5 * height && y2 < 0.5 * height){
    console.log('true');
    return true;
  }
  // 新增默认返回
  return false;
}

4. 可选优化：删除drawRectangle中没用的ctx.rect(xCoord,yCoord,width,height)代码，避免多余的路径绘制占用性能。

修复后碰撞检测逻辑会使用矩形实际的中心坐标做运算，把点击坐标反向旋转后再和矩形宽高做对比，就能正确识别点击是否落在旋转后的矩形内部。

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