HOME

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° = α : π

 


 

Trasformazione gradi radianti
METODO arc(x,y,r,inizio,fine)    

Crea un arco di circonferenza.
I parametri sono

  1. x: l'ascissa del centro dell'arco;
  2. y: l'ordinata del centro dell'arco;
  3. r: misura del raggio in pixel;
  4. inizio: un estremo dell'arco, espresso in radianti;
  5. 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.25*Math.PI;
var fine=1.25*Math.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()

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

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi





Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it