Tutorial per il metodo rotate() - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER L'APPLICAZIONE DEL METODO rotate() CON ANGOLO E CENTRO A PIACERE

Il presente tutorial si riferisce al "metodo rotate()" della guida a MATEMATICA CON JAVASCRIPT, area Canvas.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
Visto che il disegno degli assi di riferimento e della griglia di fondo richiede numerose righe di codice, abbiamo preferito inserire gli stessi come immagine di sfondo: per questo motivo, anche se variate unità di misura o posizione origine, la griglia non varia. Potete invece cambiare ascissa e ordinata del centro di rotazione, il quadrato di partenza, l'angolo di rotazione.

Dopo aver apportato le modifiche desiderate si può vedere l'anteprima cliccando sul tasto:

A LATO per osservare il risultato nell' iframe a destra nella pagina;
POPUP per osservare il risultato in una finestra popup

NOTA BENE - Gli utenti google chrome possono solo visualizzare il risultato in una popup, a causa del malfunzionamento del browser con gli iframe.

Infine, cliccando sul tasto AGGIORNA, viene ricaricata la pagina corrente come è adesso:

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

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

CODICE

<!DOCTYPE html> <HTML> <BODY> <canvas id="lavagna" width="400" height="400" style="border:1px solid maroon; background:url(http://www.webfract.it/MATJAVA/GuidaCanvas/assiGriglia.png)"></canvas></p> <script> var c = document.getElementById('lavagna'); const Ox=c.width/2; //ascissa origine const Oy=c.height/2; //ordinata origine const u = 10; //unità di misura var Px,Py,lato //(coordinate punto P e lato del quadrato) var Cx,Cy //(coordinate del centro di rotazione C) var alfa //angolo di rotazione Px=-10; Py=-2; Cx=10; Cy =3; var lato = 5 alfa = 60*Math.PI/180 //angolo trasformato in radianti var ctx=c.getContext("2d"); //TRASLAZIONE PER SISTEMA DI RIFERIMENTO ctx.translate(Ox,Oy); //DISEGNO IL CENTRO DI ROTAZIONE ctx.fillRect(Cx*u,-Cy*u,1,1); ctx.fillText('C',Cx*u,-Cy*u) //QUADRATO DI PARTENZA ctx.fillStyle="rgb(255,0,0)" ctx.fillRect(Px*u,-Py*u,lato*u,lato*u); ctx.strokeRect(Px*u,-Py*u,lato*u,lato*u); //SEGMENTO PC ctx.moveTo(Cx*u,-Cy*u); ctx.lineTo(Px*u,-Py*u); ctx.stroke(); //PUNTO P ctx.fillText('P',Px*u,-Py*u) //TRASLAZIONE VERSO IL CENTRO DI ROTAZIONE ctx.translate(Cx*u,-Cy*u); //ROTAZIONE ctx.rotate(-alfa); //TRASLAZIONE INVERSA ctx.translate(-Cx*u,+Cy*u); //QUADRATO RUOTATO ctx.fillStyle="rgba(255,255,0,0.5)" ctx.fillRect(Px*u,-Py*u,lato*u,lato*u); ctx.strokeRect(Px*u,-Py*u,lato*u,lato*u); //SEGMENTO P'C ctx.moveTo(Cx*u,-Cy*u); ctx.lineTo(Px*u,-Py*u); ctx.stroke(); //PUNTO P' ctx.fillStyle='rgb(0,0,255)' ctx.fillText('P\'',Px*u,-Py*u) </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Metodo rotate() - Sistema di riferimento Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER L'APPLICAZIONE DEL METODO rotate() CON ANGOLO E CENTRO A PIACERE

CODICE

RISULTATO