Metodo di traduzione HTML5, come ripristinare l'impostazione predefinita?

Poiché il metodo di traduzione HTML5 sposta l'origine del disegno relativamente alla sua precedente origine apparentemente. (quando uso ctx.translate (20,20) due volte di seguito ottengo lo stesso risultato di quando uso ctx.translate (40,40)) Bene, ora il problema è che mi piacerebbe reimpostare l'origine del disegno alla sua posizione originale (la posizione che aveva prima del primo utilizzo di translate() su di esso), come faccio?Metodo di traduzione HTML5, come ripristinare l'impostazione predefinita?

fonte

2012-06-21 Wingblade

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

MDN setTransform documentation

fonte

2013-07-09 23:13:38

Esattamente quello che stavo cercando. 'ctx.setTransform (1, 0, 0, 1, 0.5, 0.5);' e non si preoccupa mai di reimpostare la trasformazione. – Nolonar

Anche se funziona, la risposta @Loktar dovrebbe essere accettata come la migliore: http://stackoverflow.com/a/11144306/1866876 – viarnes

Se tutto ciò che si desidera è annullare un singolo batch di traslazioni nello spazio predefinito (non trasformato), quindi 'setTransform (1,0,0,1,0,0)' è migliore di 'save & restore' perché salva/ripristina funziona su ogni proprietà del contesto anziché solo sulle trasformazioni. – markE

è possibile farlo utilizzando .save() e .restore()

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

È necessario chiamare save() per "salvare" l'attuale stato di contesti. Quindi è possibile eseguire traduzioni, rotazioni, ecc. Dopo aver terminato la chiamata, chiamare restore() per ripristinare lo stato del contesto a quello che era quando inizialmente si chiamava save().

Live Demo

MDN Tutorial also explaining it

fonte

2012-06-21 18:17:43 Loktar

Grazie mille :) – Wingblade

Questa è la soluzione migliore perché consente di impilare le trasformazioni. – sdgfsdh