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

Question

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

原文由 Wingblade 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

MDN setTransform 文档

原文由 psycho brm 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

现场演示

MDN 教程也解释了它

原文由 Loktar 发布，翻译遵循 CC BY-SA 3.0 许可协议