Tutorial per costruire un rettangolo aureo

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER COSTRUIRE UN RETTANGOLO AUREO

Il presente tutorial si riferisce a "costruire la sezione aurea di un segmento HTML5 canvas" della guida a MATEMATICA CON JAVASCRIPT.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
Ascissa e ordinata dell'origine del sistema di riferimento, variabili, coincidono con il centro del rettangolo aureo. L'unità di misura corrisponde alla misura del lato maggiore. Potete, ovviamente, cambiare i dati secondo le vostre esigenze.

E' possibile cambiare anche le altre opzioni e quindi 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

<HTML> <BODY> <canvas id="lavagna" width=300 height= 300 style="border:1px solid maroon;"></canvas> <script> const u=150; //unità di misura const phi=(Math.sqrt(5)+1)/2; // rapporto aureo var lato= u*phi; //Se si vuole che la base sia la sezione aurea dell'altezza porre invece lato=u/phi; var c = document.getElementById('lavagna'); var ctx=c.getContext("2d"); var Ox=c.width/2; //Origine sistema di riferimento var Oy=c.height/2; ctx.translate(Ox,Oy); //traslazione assi cartesiani var rapporto = '\u03D5' ctx.fillText('A',-lato/2-8,u/2+6); ctx.fillText('B',lato/2+2,u/2+6); ctx.fillText('C',lato/2+2,-u/2); ctx.fillText('D',-lato/2-8,-u/2-2); ctx.fillStyle= "gold" //"rgba(255,0,0,0.3)" ctx.strokeStyle="rgba(0,0,255,0.3)" ctx.fillRect(-lato/2,-u/2,lato,u); // crea il rettangolo pieno ctx.strokeRect(-lato/2,-u/2,lato,u); // crea il rettangolo ctx.beginPath(); ctx.fillStyle="black" //colore del testo ctx.textAlign="center"; ctx.fillText('RETTANGOLO AUREO',0,-Oy+20); ctx.fillText('AB/AD = (\u221A5 + 1)/2 = \u03D5',0,Oy-10) //Se avete scelto lato=u/phi scrivete ctx.fillText('AD/AB = (\u221A5 + 1)/2 = \u03D5',0,Oy-10) </script> </BODY> </HTML>

RISULTATO

Matematica con javascript, area Canvas: Indice Matematica con javascript Indice - Sezione aurea

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

CODICE

RISULTATO