Tutorial per costruire un poligono regolare - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE MEDIANTE LA RICERCA DEI VERTICI

Il presente tutorial si riferisce a "disegnare un poligono regolare dopo averne trovato i vertici" 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.
In particolare notate le due costanti

const num = 5 //se si vuole un pentagono e
const u = 150 //unità di misura preferita

potete variare num per ottenere un poligono regolare con un diverso numero di lati e u per variarne la misura.

Potete anche, ad esempio variare cod1: ponete, ad esempio, cod1 = 49.

E' possibile osservare 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"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById('lavagna'); c.width=c.width; var ctx=c.getContext("2d"); const num = 5 //se si vuole un pentagono const u = 180 //unità di misura preferita const alfa = 2*Math.PI/num; var x = new Array(); //ascisse vertici var y = new Array(); //ordinate vertici var cod1 = 65; var Ox = c.width/2; var Oy = c.height/2; ctx.translate(Ox,Oy); x[0]=-Math.sin(alfa/2); y[0]=Math.cos(alfa/2); for (i=1; i<=num-1; i+=1){ x[i]=x[i-1]*Math.cos(-alfa) - y[i-1]*Math.sin(-alfa); y[i]=x[i-1]*Math.sin(-alfa) + y[i-1]*Math.cos(-alfa); } ctx.beginPath() ctx.moveTo(u*x[0],u*y[0]); for (i=1;i<=num-1;i+=1){ ctx.lineTo(u*x[i],u*y[i]) } ctx.closePath() ctx.stroke(); ctx.beginPath() ctx.textAlign='center' ctx.textBaseline="middle"; ctx.font = "normal 12px monospace"; for (i=0; i<=num-1; i+=1){ ctx.fillText(String.fromCharCode(cod1),(u+6)*x[i],(u+6)*y[i]); cod1+=1; } </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Disegnare un poligono regolare dopo averne trovato i vertici Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE MEDIANTE LA RICERCA DEI VERTICI

CODICE

RISULTATO