使用ctx.getTransformation（）转换后获取画布鼠标坐标

感谢@MarkusJarderot和jsFiddle从未旋转的画布获取鼠标坐标，因此我能够获得接近完美的解决方案。我不太了解，但是效果更好。

function getWindowToCanvas(canvas, e) {

 //first calculate normal mouse coordinates
  e = e || window.event;
  var target = e.target || e.srcElement,
    style = target.currentStyle || window.getComputedStyle(target, null),
    borderLeftWidth = parseInt(style["borderLeftWidth"], 10),
    borderTopWidth = parseInt(style["borderTopWidth"], 10),
    rect = target.getBoundingClientRect(),
    offsetX = e.clientX - borderLeftWidth - rect.left,
    offsetY = e.clientY - borderTopWidth - rect.top;
  let x = (offsetX * target.width) / target.clientWidth;
  let y = (offsetY * target.height) / target.clientHeight;

  //then adjust coordinates for the context's transformations
  const ctx = canvas.getContext("2d");
  var transform = ctx.getTransform();
  const invMat = transform.invertSelf();
  return {
    x: x * invMat.a + y * invMat.c + invMat.e,
    y: x * invMat.b + y * invMat.d + invMat.f
  };
}

剩下的唯一问题是，当旋转45度时，使用ctx.rect（）绘制一个矩形会绘制一个相对于画布而非窗口平行的矩形，因此即使最终位于右侧，该矩形也会倾斜。地点。我想相对于窗口而不是画布绘制矩形。但是，这可能只是ctx.rect（）的工作方式，以后需要更新。目前，这可以帮助其他人。

更新 找出原始错误。由于我不明白为什么我的原始功能无法正常工作，因此使用上述解决方案开始对其进行故障排除。事实证明，上面的代码不起作用的原因是因为console.log(transform.invertSelf())我在调试时正在调用以查看转换。这使变换变形。因此，当我var invMat = transform.invertSelf()打完电话后，我又将其倒转了！我应该注意“ invertSelf”中的“自我”。

现在该功能有效

function getWindowToCanvas(canvas, x, y) {
  var rect = canvas.getBoundingClientRect();
  var screenX = (x - rect.left) * (canvas.width / rect.width);
  var screenY = (y - rect.top) * (canvas.height / rect.height);
  const ctx = canvas.getContext("2d");
  var transform = ctx.getTransform();
  if (transform.isIdentity) {
    return {
      x: screenX,
      y: screenY
    };
  } else {
    //   console.log(transform.invertSelf()); //don't invert twice!!
    const invMat = transform.invertSelf();

    return {
      x: Math.round(screenX * invMat.a + screenY * invMat.c + invMat.e),
      y: Math.round(screenX * invMat.b + screenY * invMat.d + invMat.f)
    };
  }
}