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

【问题标题】：HTML5 translate method, how to reset to default?HTML5 翻译方法，如何重置为默认值？
【发布时间】：2012-06-24 01:03:12
【问题描述】：

由于 HTML5 的 translate-method 显然将绘图的原点相对于其先前的原点移动。（当我连续两次使用 ctx.translate(20,20) 时，我得到的结果与使用 ctx.translate(40,40) 时相同）那么现在的问题是我想将绘图的原点重置为其原始位置（它在第一次使用 translate() 之前的位置），我该怎么做？

【问题讨论】：

标签： html canvas

【解决方案1】：

您可以使用.save() 和.restore() 来做到这一点

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

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

Live Demo

MDN Tutorial also explaining it

【讨论】：

这是最好的解决方案，因为它允许您堆叠转换。

【解决方案2】：

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

MDN setTransform documentation

【讨论】：

正是我想要的。 ctx.setTransform(1, 0, 0, 1, 0.5, 0.5); 并且永远不用担心重置转换。
虽然这可行，但@Loktar 的答案应该被接受为最好的答案：stackoverflow.com/a/11144306/1866876
如果您只想将一批翻译撤消回默认（未转换）空间，那么setTransform(1,0,0,1,0,0) 比save & restore 更好，因为保存/恢复适用于每个上下文属性，而不仅仅是转变。

【解决方案3】：

ctx.resetTransform();

请参阅MDN documentation 了解更多信息。它的浏览器兼容性非常低。

【讨论】：

【解决方案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。

【讨论】：