Html HTML5 翻译方法，如何重置为默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11144193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 translate method, how to reset to default?
提问by Wingblade
Since HTML5's translate-method moves the origin of drawing relatively to its former origin apparently. (when I use ctx.translate(20,20) twice in a row I get the same result as when I use ctx.translate(40,40)) Well now the problem is I'd like to reset the origin of drawing to its original position(the position it had before first useing of translate() on it), how do I do that?
由于 HTML5 的 translate-method 显然将绘图的原点相对于其原点移动。（当我连续使用 ctx.translate(20,20) 两次时，我得到的结果与使用 ctx.translate(40,40) 时的结果相同）现在的问题是我想将绘图的原点重置为它的原始位置（它在第一次使用 translate() 之前的位置），我该怎么做？
回答by Loktar
You can do that by using .save()and .restore()
你可以通过使用.save()和来做到这一点.restore()
ctx.save();
ctx.translate(// do some translations);
// draw whatever
ctx.restore();
You need to call save()to "save" the current contexts state. Then you can perform translations, rotations, etc. After your finished call restore()to reset the context's state to what it was when you initially called save().
您需要调用save()以“保存”当前上下文状态。然后您可以执行平移、旋转等操作。在您完成调用后restore()，将上下文的状态重置为您最初调用时的状态save()。
回答by psycho brm
回答by BoltKey
ctx.resetTransform();
See MDN documentationfor more info. It has very low browser compatibility.
有关更多信息，请参阅MDN 文档。它的浏览器兼容性非常低。
