使用ctx.getTransform()获取Canvas变换后鼠标坐标异常求助

你的代码里有两个关键问题导致旋转后鼠标坐标匹配错误，其中最致命的是对矩阵的原地修改操作重复调用，另一个是可选的精度问题。

1. 核心错误：重复调用invertSelf()导致矩阵反转两次 #

ctx.getTransform()返回的DOMMatrix对象的invertSelf()方法是原地修改矩阵的——调用它会直接把当前矩阵变成自己的逆矩阵，而不是返回新矩阵。你代码里先调用了一次transform.invertSelf()用来打印，然后又调用了一次赋值给invMat，这相当于把矩阵先反转成逆矩阵，然后又反转回原矩阵，最后得到的invMat其实是最初的变换矩阵，根本不是你需要的逆矩阵！

2. 修复步骤 #

方法一：使用invert()方法（推荐） #

invert()方法会返回一个新的逆矩阵，不会修改原矩阵，这样就避免了原地修改的问题：

function getWindowToCanvas(canvas, x, y) {
  const ctx = canvas.getContext("2d");
  const transform = ctx.getTransform();
  const rect = canvas.getBoundingClientRect();
  // 转换为Canvas原始像素坐标（未应用变换）
  const screenX = (x - rect.left) * (canvas.width / rect.width);
  const screenY = (y - rect.top) * (canvas.height / rect.height);

  if (transform.isIdentity) {
    return { x: screenX, y: screenY };
  } else {
    // 获取逆矩阵，不修改原变换矩阵
    const invMat = transform.invert();
    // 应用逆变换计算变换后的Canvas坐标
    return {
      x: screenX * invMat.a + screenY * invMat.c + invMat.e,
      y: screenX * invMat.b + screenY * invMat.d + invMat.f
    };
  }
}

方法二：克隆矩阵后再调用invertSelf() #

如果你更习惯用invertSelf()，可以先克隆原矩阵，再对克隆体进行原地反转：

// 替换原来的invMat赋值部分
const invMat = transform.clone().invertSelf();

3. 可选优化：避免过早取整 #

你原来的代码里用了Math.round()，这会导致坐标精度丢失，尤其是旋转非90度倍数时，鼠标和绘制的矩形容易出现偏移。建议保留浮点坐标，直到实际绘制时再根据需求处理（Canvas本身支持浮点坐标绘制）。

4. 验证逻辑 #

当你对Canvas应用旋转（比如ctx.rotate(Math.PI/2)）后，调用这个修正后的函数，返回的坐标就能正确对应到变换后的Canvas坐标系中，绘制矩形时就会准确跟随鼠标指针了。

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