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

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER L'APPLICAZIONE DEL METODO transform()

Il presente tutorial si riferisce al "metodo transform()" 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 non vi consigliamo di cambiarli. Potete invece cambiare ascissa e ordinata del vertice A e il lato del quadrato di partenza, nonché i parametri della trasformazione.

Potete anche ispirarvi, per la scelta dei parametri, a quelli che abbiamo inserito nella pagina "trasformare uno smile"

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> <!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 canvas = document.getElementById('lavagna'); var ctx=canvas.getContext("2d"); const Ox=canvas.width/2; //ascissa origine const Oy=canvas.height/2; //ordinata origine const u = 10; //unità di misura const lato = 5; //lato del quadrato var a,b,c,d,e,f //(parametri per il metodo transform) var Ax=-5; //(coordinate vertice A) var Ay=-2; a= 2; b=-0.25; c=0.15; d=0.9; e=3*u; f=-4*u; //TRASLAZIONE PER SISTEMA DI RIFERIMENTO ctx.translate(Ox,Oy); //QUADRATO DI PARTENZA ctx.fillStyle="rgba(0,0,255,0.3)" ctx.fillRect(Ax*u,-Ay*u,lato*u,lato*u); ctx.strokeRect(Ax*u,-Ay*u,lato*u,lato*u); //VERTICI DEL QUADRATO ctx.beginPath() ctx.fillStyle="rgb(255,0,0)" ctx.fillText('A',Ax*u,-Ay*u); ctx.fillText('B',Ax*u,-(Ay-lato)*u); ctx.fillText('C',(Ax+lato)*u,-(Ay-lato)*u); ctx.fillText('D',(Ax+lato)*u,-Ay*u); //TRASFORMAZIONE ctx.transform(a,b,c,d,e,f); //QUADRATO TRASFORMATO ctx.fillStyle="rgba(0,180,0,0.5)" ctx.fillRect(Ax*u,-Ay*u,lato*u,lato*u); ctx.strokeRect(Ax*u,-Ay*u,lato*u,lato*u); //VERTICI DEL QUADRATO TRASFORMATO ctx.beginPath() ctx.fillStyle="rgb(0,0,180)" ctx.fillText('A\'',Ax*u,-Ay*u); ctx.fillText('B\'',Ax*u,-(Ay-lato)*u); ctx.fillText('C\'',(Ax+lato)*u,-(Ay-lato)*u); ctx.fillText('D\'',(Ax+lato)*u,-Ay*u); </script> </body> </html>

RISULTATO

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

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER L'APPLICAZIONE DEL METODO transform()

CODICE

RISULTATO