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 CON IL METODO rotate()

Il presente tutorial si riferisce a "disegnare un poligono regolare con HTML5 canvas" 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.

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"); var Ox = c.width/2; var Oy = c.height/2 + 10; ctx.translate(Ox,Oy); const num = 5 //se si vuole un pentagono const u = 200 //unità di misura preferita const alfa = 2*Math.PI/num; const x=-Math.sin(alfa/2); const y=Math.cos(alfa/2); ctx.moveTo(u*x,u*y); ctx.lineTo(-u*x,u*y); ctx.stroke(); for (i=1; i<=num-1; i+=1){ ctx.beginPath() ctx.rotate(-alfa); ctx.moveTo(u*x,u*y); ctx.lineTo(-u*x,u*y); ctx.stroke(); } </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Poligoni regolari Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER LA COSTRUZIONE DI UN POLIGONO REGOLARE CON IL METODO rotate()

CODICE

RISULTATO