HTML5 tłumaczyć metodę, jak przywrócić domyślne?

Ponieważ metoda translacji HTML5 przesuwa początkowo pochodzenie rysunku w stosunku do poprzedniego pochodzenia. (Kiedy używam ctx.translate (20,20) dwa razy z rzędu, otrzymuję taki sam wynik, jak gdy używam ctx.translate (40,40)) Teraz problem polega na tym, że chciałbym zresetować pochodzenie rysunku do jego pierwotnego położenia (położenia, jakie miał przed pierwszym użyciem translate() na nim), jak mam to zrobić?HTML5 tłumaczyć metodę, jak przywrócić domyślne?

Źródło

2012-06-21 Wingblade

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

MDN setTransform documentation

Źródło

2013-07-09 23:13:38

Dokładnie to, czego szukałem. 'ctx.setTransform (1, 0, 0, 1, 0.5, 0.5);' i nigdy nie martw się resetowaniem transformacji. – Nolonar

Chociaż to działa, odpowiedź @Loktar powinna być zaakceptowana jako najlepsza: http://stackoverflow.com/a/11144306/1866876 – viarnes

Jeśli chcesz tylko cofnąć pojedynczą partię tłumaczeń z powrotem do domyślnej (nieprzetworzonej) przestrzeni, wtedy 'setTransform (1,0,0,1,0,0)' jest lepsze niż 'save & restore', ponieważ save/restore działa na każdej właściwości context zamiast tylko transformacji. – markE

Można to zrobić za pomocą .save() i .restore()

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

Trzeba zadzwonić save() na "zapisz" aktualny stan kontekstach. Następnie możesz wykonywać tłumaczenia, obracania itp. Po zakończeniu połączenia restore(), aby zresetować stan kontekstu do stanu, który był początkowo nazywany save().

Live Demo

MDN Tutorial also explaining it

Źródło

2012-06-21 18:17:43 Loktar

Dziękuję bardzo :) – Wingblade

Jest to najlepsze rozwiązanie, ponieważ pozwala na stos transformacji. – sdgfsdh