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).
-
Acquistabile da:
- bookrepublic
- ebook LeggoOggi.it
- EURONICS
- freeonline
- Gola Ad
- GPLAY
- HOEPLI
- iTunes
- kobo
- omnia BUK
- SECRETARY
- StreetLib
Art-designer