Utilizzo cookies
L'e-book interattivo I colori Comandi base save() & restore() Stili di linee Rettangoli Archi e Circonferenze clip() Colori gradienti e stili Effetti Ombra Curve di Bezier Testo Trasformazioni Disegnare con Immagini Manipolazione dei Pixel Alpha trasparenza globalCompositeOperation convertire <canvas> Animazioni Grafici 20 Equazioni e spirali

HTML5 canvas in tempo reale


arcTo() arco fra tangenti di circonferenza

Definisce un un arco tra due tangenti di una circonferenza, occorre poi  chiamare stroke() per disegnare effettivamente l'arco.

Esempio A

Anche se alla funzione arcTo () devono essere passati due punti, in realtà i punti coinvolti sono 3. 

  • (x0, y0)  punto corrente nel percorso prima di chiamare arcTo.
  • (x1, y1) e (x2, y2) i due punti di controllo da passare a arcTo ().
  • Raggio della circonferenza immaginaria.

  • Tracciare una linea immaginaria attraverso (x0, y0) e (x1, y1).
  • Tracciare un'altra linea immaginaria attraverso (x1, y1) e (x2, y2).
  • Considerare una circonferenza immaginaria di raggio r, e farla scorrere all'interno dell'area (x0,y0)-(x1,y1)-(x2,y2) fino a toccare appena entrambe le linee (x0,y0)-(x1,y1) 2 (x1,y1)-(x2,y2) .

I due punti dove la circonferenza tocca ciascuna linea sono i punti di tangenza.
La funzione arcTo(x1, y1, x2, y2, radius), disegna un arco del raggio r fra i due punti di tangenza.

Esempio B

<script>
    context.beginPath();
    context.moveTo(100, 225);             // P0
    context.arcTo(300, 25, 500, 225, 80); // P1, P2 e raggio
    context.lineTo(500, 225);             // P2
    context.stroke();
</script>


P0 è dato dalla chiamata moveTo iniziale.
La linea A è la linea di collegamento che viene disegnata implicitamente P0 all'inizio dell'arco
Questo è il punto di tangenza fra il segmento A e la circonferenza.
P1 è il primo punto della funzione arcTo (300,25,........)
In viola, il raggio che si dà come argomento finale per la funzione arcTo in questo esempio è 80.
La fine dell'arco che è prodotto dalla funzione arcTo. Questo è il punto di tangenza fra il segmento B e la circonferenza.
La linea B è la funzione lineTo che si dà dopo la funzione arcTo.
P2 è il secondo punto (X / Y) che si dà alla funzione arcTo e viene utilizzato anche nella funzione lineTo finale (testo in rosso).








Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.
Antonella Brandi
Art-designer