Canvas translate transform setTransform.

1. translate() = Új y-0 és x-0 koordináta pozíciók meghatározására használjuk.
2. transform() = Új y-0 és x-0 koordináta pozíciókra, új alakzat méretezésre, alakzat torzítására, használhatjuk.
3. setTransform() = Előzetesen meghatározott transform() meghatározásokat visszaállíthatjuk, vagy új kezdő pozíciót határozhatunk meg.

translate()

A canvas koordináta y-0 és x-0 pozíciója alaphelyzetben, a canvas rajzvászon bal felső sarkában van.
Ezért, csak azon alakzatok láthatók, melyek y és x koordináta értékék, pozitív értékkel határoztuk meg.

Az y-0 és x-0 koordináta értékeket, tetszőleges pozícióba helyezhetjük, a translate(y,x) metódussal.
Ha az y-0 és x-0 koordináta értékeket, áthelyezzük nekünk megfelelő pozícióba a translate(y,x) metódussal, akkor azon alakzatok is láthatók lesznek, melyeknek pozícióját negatív értékkel határozzuk meg.

1. Példa:
Alaphelyzetben, negatív és pozitív értékkel meghatározott alakzatok, elhelyezése:
A negatív értékkel meghatározott kék alakzat, kívül esik canvas területén, ezért nem látható.
A pozitív értékkel meghatározott piros alakzat, canvas területén van, ezért látható.

Alaphelyzet, y és x koordináta 0-0 pozícióban.

<canvas id="alaphelyzet" width="300" height="300">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var cahp=document.getElementById("alaphelyzet");
var cah = cahp.getContext("2d");
// Első négyszög kék, de nem látszik.
cah.fillStyle="blue";
cah.fillRect(-120,-80,100,60);
cah.closePath();
// Második négyszög piros, és látszik.
cah.beginPath();
cah.fillStyle="red";
cah.fillRect(20,20,100,60);

Alaphelyzet, y és x koordináta 0-0 pozícióban.

2. Példa:
A translate(y,x) metódussal, új alaphelyzet meghatározásakor, negatív és pozitív értékkel meghatározott alakzatok, elhelyezése:
A translate(y,x) metódussal meghatározott új 0-0 koordinátapozícióval, láthatóvá tehetjük a negatív értékkel meghatározott
kék alakzatot is.

Új alaphelyzet pozíció, y-0 és x-0 koordináta értékek,
140-140 pozícióba helyezésével.

<canvas id="translate" width="300" height="300">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var ctup = document.getElementById("translate");
var cup = ctup.getContext("2d");
// 0-0 pozíció áthelyezése, 140-140 pozícióba.
cup.translate(140,140);

// Első négyszög kék, és negatív értékekkel is, látszik.
cup.beginPath();
cup.fillStyle="blue";
cup.fillRect(-120,-80,100,60);
cup.closePath();

// Második négyszög piros, és látszik.
cup.beginPath();
cup.fillStyle="red";
cup.fillRect(20,20,100,60);
</script>

Új alaphelyzet pozíció, y és x koordináta 0-0 pozíciója,
áthelyezve a 140-140 pozícióba.

transform()

A transform () metódus, lehetővé teszi az aktuális rajz méretezését, torzítását, mozgatását.
A transzformáció / átalakítás, csak a transzform() metódus után végzett rajzokat érinti.
A transform () metódus alkalmazható, rotate(), scale(), transzlate() vagy transform() átalakításoknál is.
A fillRect() és strokeRect() csak derékszögű négyszöget rajzolnak, meghatározott y-x pozícióból és width-height méretekkel,
négyzet vagy téglalap formátumban.
A transform() metódus alkalmazásával, derékszögtől és eredeti méretektől eltérő formátumot hozhatunk létre.

A transform() metódus így, nem módosítja eredeti rajz méreteit / formáját: transform(1, 0, 0, 1, y, x);
( Az y és x érték egyezzen meg, a fillRect()-nél vagy strokeRect()-nél megadott, pozíció értékekkel. )

A canvas rajzvászon minden tárgyának, van egy átalakító mátrixa.
A transform szintaxisa: transzform ( wm, yt,  xt, hm,   y, x );

Parameter	Leírás
wm	Meghatározza alakzat vízszintes (width) érték méretének szorzatát. ( 0.01 század értéktől növekedhet. 1-nél kisebb érték csökkenti, 1-nél nagyob érték növeli alakzat szélességét.)
yt	Meghatározza vízszintes y koordinátatengely és alakzat torzítási/ferdítési értékét. (Értéke lehet: negatív vagy pozitív.)
xt	Meghatározza függőleges x koordinátatengely és alakzat torzítási/ferdítési értékét. (Értéke lehet: negatív vagy pozitív.)
hm	Meghatározza alakzat függőleges (height) érték méretének szorzatát.( 0.01 század értéktől növekedhet. 1-nél kisebb érték csökkenti, 1-nél nagyob érték növeli alakzat magasságát.)
y	Meghatározza y vízszintes koordinátatengely, új 0 pozícióját.
x	Meghatározza x függőleges koordinátatengely, új 0 pozícióját.

Példa, alakzat megjelenítésére, alaphelyzetben és transform() metódust követően.

Alaphelyzet.
Derékszögű négyszög.

fillStyle="yellow";
fillRect(0,0,  100,100);

Pozíció transformálás.
Érrték: + vagy -

transform(1, 0, 0, 1, 20, 20);
fillStyle="yellow";
fillRect(0,0,  100,100);

Width transformálás.
Érrték: 0.01 -től, növekedhet.

transform(2, 0, 0, 1, 0, 0);
fillStyle="yellow";
fillRect(0,0,  100,100);

Height transformálás.
Érrték: 0.01 -től, növekedhet.

transform(1, 0, 0, 2, 0, 0);
fillStyle="yellow";
fillRect(0,0,  100,100);

Függőleges transformálás.
Érrték: Pozítiv.

transform(1, 0.5, 0, 1, 60, 60);
fillStyle="yellow";
fillRect(0,0,  100,100);

Függőleges transformálás.
Érrték: Negativ.

transform(1, -0.5, 0, 1, 60, 60);
fillStyle="yellow";
fillRect(0,0,  100,100);

Vízszintes transformálás.
Érrték: Pozítiv.

transform(1, 0, 0.5, 1, 60, 20);
fillStyle="yellow";
fillRect(0,0,  100,100);

Vízszintes transformálás.
Érrték: Negativ.

transform(1, 0, -0.5, 1, 60, 20);
fillStyle="yellow";
fillRect(0,0,  100,100);

További transform() szemléltető példák.

transform() új koordináta 0-0 pozíció meghatározás.

A transform() y és x értékei, tetszőleges pozícióba helyezik, a koordinátatengelyek 0-0 pozícióját.
A 0-0 pozíció áthelyezésével, láthatóvá tehetjük azon alakzatokat, melyek pozíciója negatív értékkel van meghatározva, vagy a canvas területén, tetszőleges pozícióba mozgathatunk alakzatokat.
Figyeljük meg!
A transform() y és x értékeinek meghatározásával, ugyanazt a hatást érjük el, mint a translate(y,x) értékeinek meghatározásával.

transzform ( wm,  yt,  xt,  hm,  y,  x );
y	Meghatározza vízszintes koordinatatengely kezdő pozícióját.
x	Meghatározza függőleges koordinatatengely kezdő pozícióját.

A transform() metódussal, új y és x koordináta 0-0 pozíciót határozunk meg, a 160-160 pozícióba.

<canvas id="transformk00" width="320" height="320">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var tkoordinata=document.getElementById("transformk00");
var txyk = tkoordinata.getContext("2d");
txyk.transform(1, 0, 0, 1, 160,160);
txyk.beginPath();
txyk.fillStyle="blue";
txyk.fillRect(-120,-80,100,60);
txyk.closePath();
txyk.beginPath();
txyk.fillStyle="red";
txyk.fillRect(20,20,100,60);
</script>

transform() koordinátatengely és alakzat ferdítés/torzítás.

A transform() b és c értékei, tetszőleges pozícióba torzítják/forgatják, a koordinátatengelyeket úgy, hogy a koordináták 0-0 pontjai, nem változnak.

transzform ( wm,  yt,  xt,  hm,  y,  x );
yt =  Meghatározza vízszintes y koordinátatengely torzítási/elforgatási értékét. (Értéke lehet: negatív vagy pozitív.)
xt =  Meghatározza függőleges x koordinátatengely torzítási/elforgatási értékét. (Értéke lehet: negatív vagy pozitív.)

1. Példa:
A transform() metódussal, y koordinátatengely és alakzat torzítása / elforgatása 45-fokkal, pozitív irányba.

<canvas id="ytranstorzitas" width="320" height="350">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var ytorzitas=document.getElementById("ytranstorzitas");
var ytorz = ytorzitas.getContext("2d");
ytorz.transform(1, 1, 0, 1, 160,160);
ytorz.beginPath();
ytorz.fillStyle="blue";
ytorz.fillRect(-120,-80,100,60);
ytorz.closePath();
ytorz.beginPath();
ytorz.fillStyle="red";
ytorz.fillRect(20,20,100,60);
</script>

Mostantól az alakzatokat, további pozícióba mozgathatjuk.
- Ha mindegyik alakzatot egyformán akarjuk elmozgatni, akkor a transform() y és x értékeit módosítjuk.
- Ha egy kiválasztott alakzatot akarunk elmozgatni, akkor a hozzá tartozó fillRect(y,x) vagy strokeRect(y,x) értékeit kell módosítani.
Kiválasztott fillRect(y,x) vagy strokeRect(y,x) alakzatnál:
Az y érték jobbra-le vagy balra-felfelé mozgat.
Az x érték függőlegesen le vagy felfelé mozgat.

2. Példa:
A transform() metódussal, y koordinátatengely és alakzat torzítása / elforgatása 45-fokkal, negatív irányba.
A transform() b és c értékei, tetszőleges pozícióba torzítják/forgatják a koordinátatengelyeket úgy, hogy a koordináták 0-0 pontjai, nem változnak.

transzform ( wm,  yt,  xt,  hm,  y,  x );
yt =  Meghatározza vízszintes y koordinátatengely torzítási/elforgatási értékét. (Értéke lehet: negatív vagy pozitív.)
xt =  Meghatározza függőleges x koordinátatengely torzítási/elforgatási értékét. (Értéke lehet: negatív vagy pozitív.)

<canvas id="yntranstorzitas" width="320" height="350">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var yntorzitas=document.getElementById("yntranstorzitas");
var yntorz = yntorzitas.getContext("2d");
yntorz.transform(1, -1, 0, 1, 160,160);
yntorz.beginPath();
yntorz.fillStyle="blue";
yntorz.fillRect(-120,-80,100,60);
yntorz.closePath();
yntorz.beginPath();
yntorz.fillStyle="red";
yntorz.fillRect(20,20,100,60);
</script>

Mostantól az alakzatokat, további pozícióba mozgathatjuk.
- Ha mindegyik alakzatot egyformán akarjuk elmozgatni, akkor a transform() y és x értékeit módosítjuk.
- Ha egy kiválasztott alakzatot akarunk elmozgatni, akkor a hozzá tartozó fillRect(y,x) vagy strokeRect(y,x) értékeit kell módosítani.
Kiválasztott fillRect(y,x) vagy strokeRect(y,x) alakzatnál:
Az y érték jobbra-fel vagy balra-lefelé mozgat.
Az x érték függőlegesen le vagy felfelé mozgat.

3. Példa:
A transform() metódussal, x koordinátatengely és alakzat torzítása / elforgatása 45-fokkal, pozitív irányba.

<canvas id="xtranstorzitas" width="320" height="350">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var xtorzitas=document.getElementById("xtranstorzitas");
var xtorz = xtorzitas.getContext("2d");
xtorz.transform(1,0, 1,1,  160,160);
xtorz.beginPath();
xtorz.fillStyle="blue";
xtorz.fillRect(-120,-80,100,60);
xtorz.closePath();
xtorz.beginPath();
xtorz.fillStyle="red";
xtorz.fillRect(20,20,100,60);
</script>

Mostantól az alakzatokat, további pozícióba mozgathatjuk.
- Ha mindegyik alakzatot egyformán akarjuk elmozgatni, akkor a transform() y és x értékeit módosítjuk.
- Ha egy kiválasztott alakzatot akarunk elmozgatni, akkor a hozzá tartozó fillRect(y,x) vagy strokeRect(y,x) értékeit kell módosítani.
Kiválasztott fillRect(y,x) vagy strokeRect(y,x) alakzatnál:
Az y érték vízszintesen jobbra vagy balra mozgat.
Az x érték jobbra-le vagy balra-felfelé mozgat.

4. Példa:
A transform() metódussal, x koordinátatengely és alakzat torzítása / elforgatása 45-fokkal, negatív irányba.

<canvas id="xntranstorzitas" width="320" height="350">
Ön böngészője, nem támogatja canvas elemet.</canvas>
<script>
var xntorzitas=document.getElementById("xntranstorzitas");
var xntorz = xntorzitas.getContext("2d");
xntorz.transform(1, 0, -1, 1,  160,160);
xntorz.beginPath();
xntorz.fillStyle="blue";
xntorz.fillRect(-120,-80,100,60);
xntorz.closePath();
xntorz.beginPath();
xntorz.fillStyle="red";
xntorz.fillRect(20,20,100,60);
</script>

Mostantól az alakzatokat, további pozícióba mozgathatjuk.
- Ha mindegyik alakzatot egyformán akarjuk elmozgatni, akkor a transform() y és x értékeit módosítjuk.
- Ha egy kiválasztott alakzatot akarunk elmozgatni, akkor a hozzá tartozó fillRect(y,x) vagy strokeRect(y,x) értékeit kell módosítani.
Kiválasztott fillRect(y,x) vagy strokeRect(y,x) alakzatnál:
Az y érték vízszintesen jobbra vagy balra mozgat.
Az x érték jobbra-fel vagy balra-lefelé mozgat.

Több transform() metódussal, ferdítés/torzítás le és balra.

Figyeljük meg!
Amikor egymás után többször is meghatározzuk a transform() metódust, akkor az előző transform értékekre épül, a következő transform meghatározás.

A következő példákban egymást követően, 10 alkalommal szerepel a transform meghatározás.

Mindegyik transform értéke, mellyel a fillRect() vagy strokeRect() alakzatot torzítja:
1.	Példában:   yt = 0.1-es pozitív érték.     xt = 0;     ( y torzítás. )
2.	Példában:   yt = 0;     xt = -0.1-es negatív érték.   ( x torzítás. )

1. Példa:

var te=document.getElementById("test");
var tes=te.getContext("2d");
 tes.translate(120,60);  tes.lineWidth = 3;
     tes.strokeStyle = "black"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "red";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "blue";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "lime";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "purple"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "yellow"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "black"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "red"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "blue"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "green"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0.1, 0, 1, 0,0);
	tes.strokeStyle = "purple"; tes.strokeRect(0, 0, 100, 100);

2. Példa:

var te2=document.getElementById("test2");
var tes=te2.getContext("2d");
 tes.translate(120,60);  tes.lineWidth = 3;
    tes.strokeStyle = "black";  tes.strokeRect(0, 0, 100, 100);
 tes.transform(1,  0,-0.1,  1, 0,0);
	tes.strokeStyle = "red";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "blue";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "lime";   tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "purple"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "yellow"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "black"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "red"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "blue"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "green"; tes.strokeRect(0, 0, 100, 100);
 tes.transform(1, 0, -0.1, 1, 0,0);
	tes.strokeStyle = "purple"; tes.strokeRect(0, 0, 100, 100);

setTransform() metódus

A setTransform bemutatásához, elsőkén nézzük a transform() alakzatokat.

Példa 4 négyszöggel: ( A 2; 3; 4; alakzatok transform() meghatározásai megegyeznek. )
1. Sárga négyszög, melynél nincs transform() meghatározás. Alaphelyzetet szemlélteti.
2. Piros négyszög, melynél a transform() meghatározás: transform(1,0.5, -0.5,1, 30, 10);
3. Kék négyszög, melynél a transform() meghatározás: transform(1,0.5, -0.5,1, 30, 10);
4. Zöld négyszög, melynél a transform() meghatározás: transform(1,0.5, -0.5,1, 30, 10);

Figyeljük meg, hogy minden egyes alkalommal, amikor a transzformációt () meghívjuk, az előző transzformációs mátrixra épül.

<canvas id="transform" width="300" height="380">
Böngészője, nem támogatja canvas elemet. </canvas>
<script>
var id=document.getElementById("transform");
var ctx=id.getContext("2d");
var y=100;  x=0;  w=80;  h=40;
var yt = 0.4;   xt = -0.4;

ctx.fillStyle="yellow";    ctx.fillRect(y,x,  w,h);

ctx.transform(1,  yt,xt,  1,  30,5);
ctx.fillStyle="red";         ctx.fillRect(y,x,  w,h);

ctx.transform(1,  yt,xt,  1,  30,5);
ctx.fillStyle="blue";       ctx.fillRect(y,x,  w,h);

ctx.transform(1,  yt,xt,  1,  30,5);
ctx.fillStyle="lime";       ctx.fillRect(y,x,  w,h);

A setTransform() metódussal, új kezdő transform() pozíciót határozunk meg, majd ezt követően, ismét jöhetnek a transform meghatározások.
A setTransform() utáni alakzatok pozícióját nem változtatjuk meg, akkor az előzőleg rajzolt alakzataink nem látszanának. Előzőleg megrajzolt alakzatok láthatók legyenek, a setTransform() utáni alakzatok pozícióját, 100-ról 140-re állítjuk.
Természetesen, a setTransform() értékeit és utána lévő alakzatok pozícióját, mindenki tetszésének megfelelően módosíthatja, csak arra kell figyelni, hogy az új értékekkel megjelenített alakzat, lehetőleg ne takarja az előzőleg már meglévő alkzatot.

<canvas id="transform2" width="300" height="380">
Böngészője, nem támogatja canvas elemet.</canvas>
<script>
var trf2 = document.getElementById("transform2");
var ctrf = trf2.getContext("2d");
var y=100; x=0; w=80; h=40;
var yt=0.4; xt=-0.4;
    ctrf.fillStyle="yellow";   ctrf.fillRect(y,x,  w,h);
	
ctrf.transform(1,  yt,xt,  1,  30,5);
    ctrf.fillStyle="red";     ctrf.fillRect(y,x,  w,h);
ctrf.transform(1,  yt,xt,  1,  30,5);
    ctrf.fillStyle="blue";    ctrf.fillRect(y,x,  w,h);
ctrf.transform(1,  yt,xt,  1,  30,5);
    ctrf.fillStyle="lime";    ctrf.fillRect(y,x,  w,h);

// Új transform pozíciót határozunk meg.
// Új pozícióból indulnak, a transform meghatározások.
ctrf.setTransform(1, yt,xt, 1,30,5);
     ctrf.fillStyle="black";    ctrf.fillRect(140,0,  80,40);
ctrf.transform(1,  yt,xt, 1,30,5);
     ctrf.fillStyle="red";      ctrf.fillRect(140,0,  80,40);
ctrf.transform(1,  yt,xt, 1,30,5);
     ctrf.fillStyle="blue";    ctrf.fillRect(140,0,  80,40);