HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


11 - Trasformazioni geometriche: rotate()

Precedente - Indice guida canvas - Successivo


A
rgomenti correlati:

TRASFORMAZIONI IN MATEMATICA

Rotazione

Per stabilire una rotazione occorre fissare un punto O, centro della rotazione, ed un angolo orientato ß che positivo se la rotazione in verso antiorario, negativo altrimenti.
Ad ogni punto P del piano distinto da O si fa corrispondere il punto P' tale che:
OP = OP';
l'angolo PÔP' = ß
Il punto O, centro della rotazione, corrisponde a se stesso.

Figura 1
Centro O ed angolo di -60

Figura 2
Centro O ed angolo di +60

Nella figura 2 stato messo in evidenza il fatto che la rotazione un'isometria: i segmenti corrispondenti hanno la stessa lunghezza.

APPROFONDIMENTO


Simpatiche applicazioni

FRAMMENTO DI CODICE

   const u =60;
  const O1x=c.width/2;   //ascissa origine
  const O1y=c.height/2;  //ordinata origine
  ctx.translate(O1x,O1y);
  var colori = new Array("rgba(255,255,0,0.5)",
  "rgba(0,255,255,0.5)","rgba(255,0,255,0.5)",
  "rgba(0,180,180,0.5)","rgba(180,180,0,0.5)",
  "rgba(180,0,0,0.5)","rgba(0,180,0,0.5)",
  "rgba(0,0,255,0.5)")
 
  for (i=0; i<8; i++){
    ctx.rotate(-Math.PI/6);
    ctx.fillStyle=colori[i]
    ctx.fillRect(0,0,u,-u)
   }




RUOTARE I CARATTERI DI UNA SCRITTA

FRAMMENTO DI CODICE

  const u =48;
  const O1x=c.width/2;   //ascissa origine
  const O1y=c.height/2 + 5;  //ordinata origine
  ctx.translate(O1x,O1y);
  var scrivi = new Array("M","a", "k", "e",
   "\u2764","L","o", "v", "e","\u2764","N",  
   "o", "t","\u2764","W","a", "r","\u2763",
   "\u2763","\u2763","")
  var colori = new Array("rgba(0,0,180,0.75)",
  "rgba(102,153,255,0.75)","rgba(153,0,102,0.75)",
  "rgba(51,102,51,0.75)","rgba(255,255,0,0.75)",
  "rgba(255,102,0,0.75)","rgba(255,0,0,0.75)")
  for (i=0; i<18; i++){
    ctx.rotate(Math.PI/9);
    ctx.beginPath();
    ctx.fillStyle=colori[i%7]
    ctx.fillText(scrivi[i],u,-u)
    ctx.strokeText(scrivi[i],u,-u)
   }

Come si vede dall'esempio, con il metodo rotate() possibile ruotare non solo i punti, ma anche i caratteri.
Nell'esempio abbiamo disposto i caratteri in forma circolare memorizzandoli in un array e facendoli scrivere uno dopo l'altro dopo aver ruotato ogni volta di π/9 (= 2π/18): la scritta infatti di 18 caratteri.



Ti potrebbero anche interessare:
Ruotare con il metodo transform()
Disegnare rettangoli
Funzioni di testo
Colori
Crea i tuoi colori

Metodo rotate()    

Ruota il disegno corrente dell'angolo dichiarato. A differenza che in matematica, il verso di rotazione positivo quello orario.

SINTASSI

context.rotate(angolo);
angolo = angolo di rotazione espresso in radianti

ESEMPIO DI CODICE ctx.rotate(60*Math.PI/180): ruota di 60 in verso orario intorno all'origine degli assi, cio intorno al vertice della canvas in alto a sinistra.

NOTA BENE - Occorre usare il metodo prima di disegnare.

Ruotare intorno all'origine degli assi cartesiani scelta a piacere    

Supponiamo di aver creato un sistema di riferimento cartesiano ortogonale con l'origine O(Ox,Oy).
Vogliamo ruotare un quadrato intorno a O di un angolo β in senso antiorario. Come procedere?

PASSO 1

Operate la traslazione di vettore (Ox,Oy): context.translate(Ox,Oy);

PASSO 2

Operate la rotazione: context.rotate(- angolo);

PASSO 3

Disegnate il quadrato.

Nella figura a sinistra, nella quale abbiamo riportato anche gli assi cartesiani, il quadrato di partenza stato disegnato in rosso, quello di arrivo in azzurro.
Visto che l'angolo di rotazione positivo, nel metodo rotate(), quello orario, se vogliamo ruotare in verso antiorario dobbiamo inserire un angolo negativo.
NOTA BENE
E' essenziale rispettare l'ordine delle trasformazioni

 

Ruotare intorno a un punto qualunque: esempio    

Nell'immagine vediamo il quadrato di vertici A(0,0) B(1,0) C(1,1) D(0,1) che stato ruotato di +45 (in senso antiorario) intorno al punto P(2.-3).

Fare clic sul pulsante "INIZIA" per eseguire la costruzione passo per passo (1 clic per ogni passo); fare in alternativa clic sul pulsante "COMPLETO" per eseguire la costruzione completa; il pulsante "AGGIORNA", infine, cancella tutto e si riparte da zero.

Rotazione




 


Ruotare intorno a un punto qualunque P(x0, y0)    

PASSO 1

Operate la traslazione di vettore (x0, y0): context.translate(x0, -y0);

PASSO 2

Operate la rotazione di angolo β e centro O(0,0): context.rotate(-β);
Se β espresso in gradi, trasformatelo in radianti mediante la regola: βrad = β × π /180

PASSO 3

Operate la traslazione inversa, di vettore (-x0, -y0): context.translate(-x0, y0);

 


 

Precedente - Successivo

IN EVIDENZA DAL SITO

 

Clicca sull'immagine per accedere al tutorial dinamico sul metodo rotate()!
Potrai cambiare ascissa e ordinata del centro di rotazione, il quadrato di partenza, l'angolo di rotazione.




 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi




 


Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it