Método de traducción HTML5, cómo restablecer a los valores predeterminados?

Dado que el método de traducción de HTML5 mueve aparentemente el origen del dibujo en relación con su origen anterior. (Cuando uso ctx.translate (20,20) dos veces seguidas obtengo el mismo resultado que cuando uso ctx.translate (40,40)) Bueno, ahora el problema es que me gustaría restablecer el origen del dibujo a su posición original (la posición que tenía antes de la primera utilización de translate() en ella), ¿cómo hago eso?Método de traducción HTML5, cómo restablecer a los valores predeterminados?

Fuente

2012-06-21 Wingblade

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

MDN setTransform documentation

Fuente

2013-07-09 23:13:38

Exactamente lo que estaba buscando. 'ctx.setTransform (1, 0, 0, 1, 0.5, 0.5);' y nunca preocuparse por restablecer la transformación. – Nolonar

Aunque esto funciona, se debe aceptar la respuesta de @Loktar como la mejor: http://stackoverflow.com/a/11144306/1866876 – viarnes

Si todo lo que desea es deshacer un solo lote de traducciones al espacio predeterminado (no transformado), entonces 'setTransform (1,0,0,1,0,0)' es mejor que 'save & restore' porque save/restore funciona en cada propiedad de contexto en lugar de solo en las transformaciones. – markE

puede hacerlo mediante el uso de .save() y .restore()

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

Es necesario llamar save() para "salvar" el estado actual de contextos. Luego puede realizar traducciones, rotaciones, etc. Después de su llamada finalizada restore() para restablecer el estado del contexto a lo que era cuando inicialmente llamó al save().

Live Demo

MDN Tutorial also explaining it

Fuente

2012-06-21 18:17:43 Loktar

Muchas gracias :) – Wingblade

Esta es la mejor solución porque le permite apilar transformaciones. – sdgfsdh