最近在制作公司的一个项目时有运用到canvas与屏幕坐标互相转换的一个知识点，如果没有进行canvas缩放、旋转、平移一系列操作时，这个需求还是比较简单的，但是如果操作复杂起来后，要再进行转换，在不知道一些特定api就显得比较困难了，在查阅了了一些资料后解决了这个需求这里分享给大家。

解决思路

解决这个需求时引用了两个API，分别是CanvasRenderingContext2D.getTransform()、
DOMMatrix.invertSelf()

CanvasRenderingContext2D.getTransform()可以获取当前canvas上下文的被应用的转换矩阵，返回DOMMatrix对象。

DOMMatrix.invertSelf()可以获取当前矩阵逆转后的结果，注意这个api是会修改自身矩阵的。

我们通过这两个API可以获取当前canvas的DOMMatrix，然后将其逆转，通过逆转后的转换矩阵就可以获取屏幕坐标转对应的canvas坐标了。

源码

// 获取canvas的逆转转换矩阵
const getCanvasInverImatrix = $canvas => {
  const ctx = $canvas.getContext('2d')
  const transform = ctx.getTransform()
  return transform.invertSelf();
}

// canvas坐标转屏幕坐标
export const canvasConversionScreen= ($canvas, { x, y }) => {
  const imatrix = getCanvasInverImatrix($canvas)

  // 如果不能求逆is2D()将会为false
  if (imatrix.is2D()) {
    const { 
      a, b, c, 
      d, e, f 
    } = imatrix

    const screenX = (c * y - d * x + d * e - c * f) / (b * c - a * d)
    const screenY = (y - screenX * b - f) / d

    return {
      x: Math.round(screenX),
      y: Math.round(screenY),
    }
  } else {
    return {
      x: NaN,
      y: NaN
    }
  }

}

// 屏幕坐标转canvas坐标
export const screenConversionCanvas = ($canvas, { x, y }) => {
  const imatrix = getCanvasInverImatrix($canvas)

  if (imatrix.is2D()) {
    const { 
      a, b, c, 
      d, e, f 
    } = imatrix

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

注意：DOMMatrix.invertSelf() 是会修改自身矩阵的，所以切忌多次调用，多次调用会逆转后再次逆转。当canvas在网页中不是位于左上角时，传入的屏幕坐标还要进行视口处理，推荐使用Element.getBoundingClientRect()API。

兼容性

CanvasRenderingContext2D.getTransform()

DOMMatrix.invertSelf()

可以看到兼容性还是比较良好的，如果没有要求兼容IE就放心大胆的用吧。