HTML5翻译方法，如何重置为默认值

Question

因为HTML5的翻译方法显然将绘图的起源相对于其以前的起源移动。（当我连续两次使用 ctx.translate（20,20） 时，我得到的结果与使用 ctx.translate（40,40）时的结果相同）那么现在的问题是我想将绘图的原点重置为其原始位置（首次在其上使用translate（）之前的位置），我该怎么做？

Answer 1

您可以使用

.save()和.restore()来做到这一点

ctx.save();
ctx.translate(// do some translations);
// draw whatever
ctx.restore();

您需要调用save()来"保存"当前上下文状态。然后，您可以执行平移，旋转等。完成调用后，restore()将上下文的状态重置为最初调用 save() 时的状态。

现场演示

MDN教程也解释了它

Answer 2

ctx.setTransform(1, 0, 0, 1, 0, 0);

MDN setTransform 文档

Answer 3

ctx.resetTransform();

有关更多信息，请参阅 MDN 文档。它具有非常低的浏览器兼容性。

Answer 4

该问题询问如何重置translate操作的默认值，该操作是上面提出的所有解决方案的子集。

无论是应用save/reset、setTransform还是resetTransform，您不仅可以重置转换的值，还可以重置倾斜和缩放的值（在第一个情况下甚至是样式）。

要仅撤消翻译，我们只需要恢复 Canvas 使用的转换矩阵的 6 个属性中的 2 个，其余属性保持不变：

const currentTransform = ctx.getTransform();
// Properties deconstructed for illustrative purposes:
const hScale = currentTransform.m11;
const vSkew = currentTransform.m12;
const hSkew = currentTransform.m21;
const vScale = currentTransform.m22;
const hTranslation = currentTransform.dx;
const vTranslation = currentTransform.dy;
ctx.setTransform(hScale, vSkew, hSkew, vScale, 0, 0);

这将重置对原点 （0， 0） 的平移，而不会更改任何比例或倾斜。

<小时 />

请注意，这也可以通过使用 transform(...) 并定义一个要乘以当前持有的画布的转换矩阵来实现，再次更改平移并保持比例和倾斜。然而，编写这样的矩阵需要知道我们当前与原点偏移的量，并且知道这些信息将使我们能够首先应用负值的translate。