使用画布获取转换后的坐标答案

【问题标题】：Get transformed coordinates with canvas使用画布获取转换后的坐标
【发布时间】：2026-01-24 21:10:01
【问题描述】：

如果我在画布上使用translate/rotate 之类的转换函数，那么当传递给任何画布函数时，所有点都会被转换。这就像一个魅力，但还有一种方法可以在不实际绘制的情况下简单地获取转换点？

这在调试时非常有用。我现在所能做的就是查看该点的最终位置，但我似乎无法获得计算出的转换坐标。

那么，假设我旋转 90 度，是否有任何函数可以获取一个点（即(10, 0)）并将转换后的点返回（即(0, 10)）？

我的意思基本上是这样的：

ctx.rotate(90 * Math.PI / 180);
ctx.transformed(10, 0); // would return (0, 10) as an array or something

【问题讨论】：

标签： javascript transform transformation html5-canvas

【解决方案1】：

现在可以使用从CanvasRenderingContext2D.getTransform() 返回的DOMMatrix：

const point = {x: 0, y: 0};
const matrix = ctx.getTransform();
const transformedPoint = {
  x: matrix.a * point.x + matrix.c * point.y + matrix.e,
  y: matrix.b * point.x + matrix.d * point.y + matrix.f,
};

【讨论】：

【解决方案2】：

简短的回答是“默认情况下不是”。

您需要自己跟踪当前的转换，因为无法获得它（人们已经提交了bugs，因为这似乎没有必要）。

像Cake.js 这样的库以及我们中的很多人，基本上都会复制转换代码以跟踪它，这样我们就可以做这样的事情。跟踪它后，您只需要：

function multiplyPoint(point) {
  return {
    x: point.x * this._m0 + point.y * this._m2 + this._m4,
    y: point.x * this._m1 + point.y * this._m3 + this._m5
  }
}

【讨论】：