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().

现场演示

MDN教程也解释了它

Answer 2

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

MDN setTransform文档

Answer 3

ctx.resetTransform();

有关详细信息,请参阅MDN文档.它具有非常低的浏览器兼容性.