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

Question

由于HTML5的translate-method显然将绘图的原点相对于其原来的原点。 （当我连续两次使用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()时的状态。

<强> Live Demo

MDN Tutorial also explaining it

Answer 2

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

MDN setTransform documentation

Answer 3

ctx.resetTransform();

有关详细信息，请参阅MDN documentation。它的浏览器兼容性非常低。