Arco di circonferenza con canvas e javascript

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS 3 - Archi e circonferenze Precedente - Indice guida canvas - Successivo

A
rgomenti correlati:

RADIANTI, π, DA GRADI A RADIANTI

Math.PI

Proprietà dell'oggetto Math. Corrisponde a pi greco (π), rapporto della circonferenza al suo diametro (circa 3.1416).

Radiante

Dato un angolo α, consideriamo la circonferenza che ha centro nel vertice dell'angolo e raggio unitario.

L'intersezione fra circonferenza e angolo è un arco di lunghezza l, 0 ≤ l ≤ 2π. La misura dell'angolo α in radianti è il rapporto l / r.
Ad ogni angolo corrisponde un solo arco e, viceversa, ad ogni arco corrisponde un solo angolo al centro.

FATTE QUESTE PREMESSE

Definiamo radiante l'ampiezza dell'angolo al centro corrispondente ad un arco di lunghezza uguale al raggio della circonferenza.

Conversione gradi radianti

Un angolo giro ha misura in radianti di 2π, corrispondente al rapporto della circonferenza al suo raggio (circa 6.2832).
Possiamo quindi impostare la proporzione

α° : 360° = α : 2π

o anche, semplificando,

α° : 180° = α : π

METODO arc(x,y,r,inizio,fine)

Crea un arco di circonferenza.
I parametri sono

x: l'ascissa del centro dell'arco;
y: l'ordinata del centro dell'arco;
r: misura del raggio in pixel;
inizio: un estremo dell'arco, espresso in radianti;
fine: l'altro estremo dell'arco, espresso in radianti.

Oltre a questi parametri si possono aggiungere

true: il verso di percorrenza da inizio a fine è antiorario;
false: il verso di percorrenza da inizio a fine è orario.

Il verso di percorrenza predefinito è quello orario. Qualsiasi sia il verso di percorrenza, i punti corrisponenti a 0, π/2, π etc. corrispondono a quelli mostrati in figura.

ESEMPIO

		In entrambi i casi abbiamo posto: var r=50; var inizio=0.25Math.PI; var fine=1.25Math.PI; var x_C=100; var y_C=100;
ctx.arc(x_C,y_C,r,inizio,fine,true); ctx.stroke();	ctx.arc(x_C,y_C,r,inizio,fine,false); ctx.stroke();

Ovviamente se si vuole disegnare una circonferenza occorrerà porre inizio = 0 ; fine = 2π

CODICE PER DISEGNARE UNA CIRCONFERENZA

ctx.arc(x_C,y_C,r,0,2*Math.PI);
ctx.stroke()

SEGNARE UN PUNTO CON IL METODO arc()

Non esiste un comando diretto per segnare un punto, ma, oltre che attraverso un rettangolo di base e altezza unitari, si può creare una circonferenza che ha centro il punto e raggio 1 pixel.

ESEMPIO

ctx.arc(x_C,y_C,1,0,2*Math.PI);
ctx.stroke()

Segna il punto nella posizione specificata da (x_C,y_C).

Vi invitiamo, se volete provare il vostro codice, a visionare la sezione

PROVA TU - METODO arc()

NOTA

Nella sezione PROVA TU è riportato il codice completo, comprensivo, in particolare, anche della dichiarazione del tag <canvas> e dello script completo

Precedente - Successivo

IN EVIDENZA DAL SITO