A kép elforgatása HTML5 vászon, népszerű programozási

Lehet, hogy már tudja, hogy van egy kényelmes módszer vászon összefüggésben drawImage:

ahol képet - DOM kép (vagy más vászon), x, y - bal felső szélén a képet. Továbbá, számos opcionális paraméterek, de nem fogjuk használni őket ma. (Láthatjuk a puskát a vásznon. Mi írt tegnap, ha kíváncsi).

Mi nem annyira nyilvánvaló, hogy hogyan kell felhívni az elforgatott képet. Valószínűleg úgy gondolja, hogy léteznie kell egy beállítási szögét, amely átvihető drawImage. De nem számít, milyen jól van, hogy teljesen be a koordináta-rendszer kidolgozása előtt.

Példa. szabott vászon háttér és a letöltött képeket, használatra kész:

Rajzolj egy képet, egy ponttal, 50, 35, ami számunkra a következő kép:

Mutassa mi történne, ha az első kanyarban koordinátarendszerben:

Mi történt? Ez így van, az összes koordináta-rendszer lett 0,5 radián (körülbelül 30 °) körül bal felső széle a vászon előtt helyeztük a képet. Ha úgy gondolja, óvatosan, akkor rájönnek, hogy koordinálja az 50, 35 nem jelenti azt, ugyanazon a helyen használják (az első példában).

Hogyan forgatni a képet, de ne ugyanazon a helyen? Ehhez meg kell forgatni, mielőtt hívja a lépés a kezdete vászon azon a helyen, ahol szeretnénk helyezni a képet hívja context.translate (x, y):

lefordítani eljárás mozog teljesen koordinátarendszerben; context.translate (50, 35) mozgatja a származási 50, 35. Következésképpen, ha most otrisuem képet a koordinátákat 0, 0 - ez lesz pontosan az első példában:

Ne feledje, hogy az eljárás forgatás körül forog az origó. Ezért, ha mozog a származási 50, 35, majd megfordul ezen a ponton:

Ez mind nagyon jól, de mi lenne, ha szeretné forgatni a képet középpontja körül? Nos, meg kell mozgatni a származási, hogy a központ a hely, ahol szeretnénk felhívni a képet, de teszi a kép azon a ponton, amelynek koordinátái ellensúlyozza fele magassága és szélessége.

Kissé zavarba? Egy példa kell, hogy a fenti világosabb:

Az egyetlen dolog, amit meg kell érteni az radián, de már kifejtettem, láttad?

Fontos megjegyzés: A művelet forgási és elmozdulás a koordinátarendszer nem érinti a már hogy állították képek, ezek befolyásolhatják a később lesznek felvéve.

Most már tudjuk, hogyan kell felhívni az elforgatott képet, miért nem teszi a függvény, amely tartalmazza a kódot?

Érdemes az időt, hogy pontosan tudja, mit forgatni, mozgatni, és mentse a koordináta-rendszer - ez nagyon erős.

A tolmács. megértéséhez ezt az információt, tettem egy példát a forgó hatszög;)