Canvas rotate() elforgatás

A rotate() elforgatási metódusnál kell meghatározni, elforgatási fok nagyságát.
A rotate elforgatási fok gyakorlati meghatározásához, a Math.PI /180 értéket szorozzuk, az elforgatáshoz szükséges fok nagyságával.
Példa rotate 45-fokos elforgatásra: rotate(45*Math.PI /180);
A rotate elforgatási fok meghatározását követő alakzatok, a meghatározott rotate értéknek megfelelően, elfordulnak.
A rotate() metódussal elforgatott alakzatot vagy alakzatokat követő rajzok, ne forduljanak el, vissza kell állítani a
rotate értéket: rotate(-45*Math.PI /180);

Az óra forgásával megegyező, 45-fokos rotate elforgatást meghatározhatjuk:
          Így:  rotate(45*Math.PI /180);     vagy így:   rotate(Math.PI / 4);    Mindkettő értéke = 0.7853981633974483;
Az óra forgásával megegyező, 90-fokos rotate elforgatást meghatározhatjuk:
          Így:  rotate(90*Math.PI /180);     vagy így:   rotate(Math.PI / 2);    Mindkettő értéke = 1.5707963267948966;

A canvas, azaz, rajzvászon elhelyezkedése, mindig a 0-pozíciótól vízszintesen jobbra, és függőlegesen lefelé van, még akkor is, ha a rotate() metódussal elforgatjuk a rajzolt alakzatunkat, és koordinátatengelyeket.
A rotate elforgatást követően, a koordináta értékeket meghatározó left-y és top-x is, más pozícióba kerül.

A canvas és koordinátatengelyek alapértelmezett megjelenése. A canvas területén, elhelyezünk egy 60x60-as piros négyszöget, left y=0 és top x=0 pozícióban. fillStyle = 'red'; fillRect(0, 0, 60, 60); Piros alakzat teljes méretében látható. Koordinátatengelyek is, alaphelyzetben vannak. Alakzat mozgatásakor: fillRect(y, x, 60, 60); y = pozitív érték, jobbra mozgat. y = negatív érték, balra mozgat. x = pozitív érték, lefelé mozgat. x = negatív érték, felfelé mozgat.

Elforgatást 45-fokban határozzuk meg. rotate(Math.PI / 4); fillStyle = 'red'; fillRect(0, 0, 60, 60); Piros alakzat azon része látható, mely a canvas területén van. Koordinátatengelyek is, elfordultak 45-fokkal. Ezért az alakzat mozgatásakor: fillRect(y, x, 60, 60); y = pozitív érték, jobbra-le mozgat. y = negatív érték, balra-fel mozgat. x = pozitív érték, balra-le mozgat. x = negatív érték, jobbra-fel mozgat. Rotate 45-fokkal elforgatott, 0-0 pozícióban lévő 60x60-as alakzat teljesen látható legyen, a következő pozíciót kell meghatározni: fillRect(30, -30, 60, 60);

Elforgatást 90-fokban határozzuk meg. rotate(Math.PI / 2); fillStyle = 'red'; fillRect(0, 0, 60, 60); Piros alakzat nem látható, mert a canvas területén kívül van. Koordinátatengelyek is, elfordultak 90-fokkal. Ezért az alakzat mozgatásakor: fillRect(y, x, 60, 60); y = pozitív érték, lefelé mozgat. y = negatív érték, felfelé mozgat. x = pozitív érték, balra mozgat. x = negatív érték, jobbra mozgat. Rotate 90-fokkal elforgatott, 0-0 pozícióban lévő 60x60-as alakzat teljesen látható legyen, a következő pozíciót kell meghatározni: fillRect(0, -60, 60, 60);

Rotate elforgatást szemléltető példa

A canvas rajzvászon területe width=300px; height=300px; sárga színnel jelölve látható.
Alaphelyzetben a rotate, azaz, forgatási pont, a 0-0 pozícióban van.
Elhelyezünk 3 alakzatot zöld színnel, melyek mérete 60x60 px.
Elsőt a 0-0 pozícióba. fillRect(0, 0, 60, 60);
Másodikat a 100-0 pozícióba. fillRect(100, 0, 60, 60);
Harmadikat a 200-0 pozícióba. fillRect(200, 0, 60, 60);
Mi történik alakzatokkal, rotate 45-fokos elforgatáskor?
Rotate, azaz elforgatott alakzatok, világoszöld színben láthatók.
A rotate elfogatáskor, nem csak az alakzatok, hanem a left-y és top-x koordinátatengelyek is, elfordulnak.
Mivel a koordinátaértéket meghatározó left-y és top-x is elfordultak 45-fokkal, ezért az y és x értékeket is, másként kell alkalmazni elforgatott alakzat további mozgatásakor.
y = pozitív érték, alakzatot 45-fokban jobbra-le mozgatja.
y = negatív érték, alakzatot 45-fokban balra-fel mozgatja.
x = pozitív érték, alakzatot 135-fokban balra-le mozgatja.
x = negatív érték, alakzatot 135-fokban jobbra-fel mozgatja.

Rotate szemléltető, 1-foktól 45-fokig.

Újbóli megtekintéshez, kattintsunk a böngésző frissítésre, vagy nyomjuk le az F5 billentyűt.

Ne feledjük, strokeRect(y, x, 100, 100):
Az y és x koordináta értékek vonala is elfordul.
Az y tengelyvonal = Alakzat felsőoldalának meghosszabbított vonalával.
Az x tengelyvonal = Alakzat baloldalának meghosszabbított vonalával.

Alakzat rotate forgatása, +1 fokonként.
   rotate(1*Math.PI/180);
Kezdő pozíció és alakzat méretei:
   lineWidth = 2;
   strokeStyle = 'red';
   strokeRect(100, 0, 100, 100);

Alakzat rotate forgatása, -1 fokonként.
   rotate(-1*Math.PI/180); 
Kezdő pozíció és alakzat méretei:
   lineWidth = 2;
   strokeStyle = 'red';
   strokeRect(0,100, 100, 100);

Program leírás.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<button id="btnrota">Katt ide, többször is!</button><br><br>
      <canvas id="KozpontiRota" width="300" height="300"></canvas>
<script language="JavaScript" type="text/javascript" src="kozpontirota.js"> </script>
</body>

$(document).ready(function(){

// Általunk meghatározott adatok: -----------------------------------------------------------
  var RectL=80;               // Négyszög start Left értéke.
  var RectT=80;               // Négyszög start Top  értéke.
  var Nszw=100;              // Négyszög szélesség meghatározása.
  var Nszh=50;                 // Négyszög magasság meghatározása.
  var rfok=11.25;              // Elforgatási fok, értéke. 
 
 
// További adatokat, a program határozza meg: ------------------------------------------------

 var kpLeft= (Nszw/2)+RectL;   // Központ left érték meghatározása.
 var kpTop = (Nszh/2)+RectT;   // Központ top  érték meghatározása.
 
 var cvid = document.getElementById('KozpontiRota');              // Canvas id.
 var rtn = cvid.getContext('2d');
	  
                // Fix, azaz, start négyszög szemléltető.
                    rtn.fillStyle = 'red';  rtn.fillRect(RectL, RectT, Nszw, Nszh);
                    rtn.arc(kpLeft,kpTop,3,0,2*Math.PI);  rtn.fillStyle = "blue";   rtn.fill();
	  
 $(" #btnrota").click( function(){
	            rtn.clearRect(RectL-2, RectT-2, Nszw+4, Nszh+4);     //  Töröljük az előző rajzot.

// Négyszög forgatása. -------------------------------
    rtn.beginPath();
             // Mátrix transzformáció.
                 rtn.translate(kpLeft, kpTop);       rtn.rotate(rfok*Math.PI/180);       rtn.translate(-kpLeft, -kpTop);
             // Elforgatott téglalap.
                 rtn.fillStyle = 'red';     rtn.fillRect(RectL, RectT, Nszw, Nszh);
    rtn.closePath();
 // ----------------------------------------------
	
      // Forgás központjának jelölése. ---------------------------
        rtn.beginPath();
             rtn.arc(kpLeft,kpTop,3,0,2*Math.PI);    rtn.fillStyle = "blue";    rtn.fill();
        rtn.closePath();

   });

});

További rotate() elforgatási példák

A rotate() elforgatáshoz, mindenki a neki megfelelő formátumot alkalmazhatja.

Rotate elforgatás, a canvas 0-0 pozíciójából

<canvas id="rotatew3" width="150" height="150" style="border:1px solid blue;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var id=document.getElementById("rotatew3");
var rajz=id.getContext("2d");
rajz.fillRect(50,20,100,50); 
</script>

<canvas id="rotatew31" width="150" height="150" style="border:1px solid blue;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var id=document.getElementById("rotatew31");
var rajz=id.getContext("2d");
rajz.rotate(20*Math.PI/180);
rajz.fillRect(50,20,100,50); 
</script>

<canvas id="rotatew32" width="150" height="150" style="border:1px solid blue;">
Az Ön böngészője, nem támogatja a HTML5 vászoncímkét.</canvas>
<script>
var id=document.getElementById("rotatew32");
var rajz=id.getContext("2d");
rajz.rotate(-20*Math.PI/180);
rajz.fillRect(20,50,100,50); 
</script>

Rotate() forgatás a vászon középpontjában, melyet a
translate(y, x); metódus határoz meg.

<canvas id="Crotate" width="200" height="200" 
style="border:2px solid blue;"></canvas>
<script>
  var rv = document.getElementById('Crotate');
  var rvf = rv.getContext('2d');
 // Alakzat (Derékszögű négyszög) méretei, width / height.
  var rectWidth = 100;
  var rectHeight = 50;
 // Rajzvászon közepének meghatározása, center-width és center-height.
  var Cw = rv.width/2;
  var Ch = rv.height/2

 // Forgatási  0-0 pozíció, a vászon középpontjában legyen.
  rvf.translate(Cw, Ch);

 // rotate forgatás 45 fokkal, az óramutató járásával megegyező irányba.
  rvf.rotate(Math.PI/4);
 // Alakzat y-0 és x-0 pozíciója. 
 // A 0-érték helyére írjuk, alakzat új pozícióját, mely lehet - vagy + érték.
  var Ay = (rectWidth/-2)-0;
  var Ax = (rectHeight/-2)-0;

  rvf.fillStyle = 'blue';
  rvf.fillRect(Ay, Ax, rectWidth, rectHeight);
</script>

Rotate() forgatás az alakzat középpontjában, melyet a
translate(y, x); metódussal határozhatunk meg.

Alaphelyzetben, forgás középpontja mindig a canvasz rajzvászon bal felső sarka (0-0 pozíció).
Alakzat középpontjában történő rotate forgatási középpont meghatározásához, át kell helyeznie 0-0 pozíciót alakzat középpontjába, a translate() módszer segítségével.

<canvas id="alaphelyzet" width="210" height="210"> </canvas>
<script>
const crva = document.getElementById('alaphelyzet');
const rva = crva.getContext('2d');

// Nem forgatott téglalap.
rva.fillStyle = 'gray';
rva.fillRect(40, 80, 120, 40);
</script>

<canvas id="a45f" width="210" height="210"> </canvas>
<script>
const crv45f = document.getElementById('a45f');
const rv45 = crv45f.getContext('2d');

// Nem forgatott téglalap.
rv45.fillStyle = 'gray';
rv45.fillRect(40, 80, 120, 40);

// Elforgatás 45-fokkal, y=0 és x=0 pozícióból.
rv45.rotate(Math.PI / 4);

// Elforgatott téglalap.
rv45.fillStyle = 'red';
rv45.fillRect(40, 80, 120, 40);
</script>

<canvas id="at45f" width="210" height="210"> </canvas>
<script>
const ct45f = document.getElementById('at45f');
const rvt45 = ct45f.getContext('2d');

// Nem forgatott téglalap.
rvt45.fillStyle = 'gray';      rvt45.fillRect(40, 80, 120, 40);

// Mátrix transzformáció.
rvt45.translate(100, 100);
rvt45.rotate(Math.PI / 4);

// Elforgatott téglalap.
rvt45.fillStyle = 'red';
rvt45.fillRect(40, 80, 120, 40);
<script>

<canvas id="at45ft" width="210" height="300"> </canvas>
<script>
const ct45ft = document.getElementById('at45ft');
const rvt45t = ct45ft.getContext('2d');

// Nem forgatott téglalap.
rvt45t.fillStyle = 'gray';      rvt45t.fillRect(40, 80, 120, 40);

// Mátrix transzformáció.
rvt45t.translate(100, 100);
rvt45t.rotate(Math.PI / 4);
rvt45t.translate(-100, -100);

// Elforgatott téglalap.
rvt45t.fillStyle = 'red';      rvt45t.fillRect(40, 80, 120, 40);
<script>

<canvas id="at90ft" width="210" height="220"> </canvas>
<script>
const ct90ft  = document.getElementById('at90ft');
const rvt90t  = ct90ft.getContext('2d');

// Nem forgatott téglalap.
rvt90t.fillStyle = 'gray';      rvt90t.fillRect(40, 80, 120, 40);

// Mátrix transzformáció.
rvt90t.translate(100, 100);
rvt90t.rotate(Math.PI / 2);
rvt90t.translate(-100, -100);

// Elforgatott téglalap.
rvt90t.fillStyle = 'red';      rvt90t.fillRect(40, 80, 120, 40);

</script>

<canvas id="at90ft" width="210" height="220"> </canvas>
<script>
const ct90ft  = document.getElementById('at90ft');
const rvt90t  = ct90ft.getContext('2d');

// Nem forgatott téglalap.
rvt90t.fillStyle = 'gray';      rvt90t.fillRect(40, 80, 120, 40);

// Mátrix transzformáció.
rvt90t.translate(100, 100);
rvt90t.rotate(Math.PI / 2);
rvt90t.translate(-100, -100);

// Elforgatott téglalap mozgatása.
// Első érték függőleges elmozgás:  mínusz esetén fel, plusz esetén le.
// Második érték vízszintes elmozgás:  mínusz esetén jobbra, plusz esetén balra.
rvt90t.fillStyle = 'red';      rvt90t.fillRect(40+40, 80-80, 120, 40);

</script>

Ne feledjük, rotate() forgatást követően:
Az y és x koordináta értékek vonala is elfordul.
Az y tengelyvonal = Alakzat felsőoldalának meghosszabbított vonalával.
Az x tengelyvonal = Alakzat baloldalának meghosszabbított vonalával.
A rotate() metódussal elforgatott alakzatot vagy alakzatokat követő rajzok, ne forduljanak el, y és x tengelyvonal alaphelyzetbe kerüljön, vissza kell állítani a rotate értéket.
Példa előzőleg 45 fokos rotate elforgatást követően, így: rotate(-45*Math.PI /180);

Forgatás szinusz és koszinusz értékekkel.

Olyan derékszög, tetszőleges háromszög, négyszög, sokszög forgatására alkalmazhatjuk, melyek sarkait, egy körrel körberajzolhatjuk úgy, hogy a kör, az alakzat minden sarkát érinti.

Űrlapos szerkesztéshez, kattints ide!

Újbóli megtekintéshez, kattintsunk a böngésző frissítésre, vagy nyomjuk le az F5 billentyűt.