HTML and CSS Reference
In-Depth Information
A ogni frame, oltre a disegnare l'immagine, disegneremo anche la palla, grazie all'uso del
path specificato.
Disegnare con il path
Nell'esempio 10.22 abbiamo visto l'uso delle funzioni fillRect e strokeRect , da
usare per il riempimento e il contorno del rettangolo. In realtà, sono le uniche due funzioni
di disegno, perché, per le altre figure primitive, l'unico strumento che possiamo usare è il
path. La logica è simile a quanto già visto con SVG:
iniziamo il disegno di una forma con la funzione beginPath ;
spostiamo il cursore o dichiariamo gli elementi con le funzioni moveTo , lineTo ,
quadraticCurveTo , bezierCurveTo , arcTo e arc ;
chiudiamo facoltativamente il disegno della forma con closePath ;
riempiamo o contorniamo la forma disegnata con fill o stroke .
Per il disegno della palla, il nostro obiettivo è riempire e contornare un cerchio:
nell'esempio 10.24 c'è il codice necessario a implementare la funzione drawBall .
Esempio 10.24
function drawBall() {
context.save();
// Traccio la palla
context.beginPath();
context.arc(ballx, bally, ballSize * 2, 0, Math.PI * 2,
true);
// Creo il gradiente della palla
var radial = context.createRadialGradient(
ballx, bally, 2, ballx, bally,
10);
radial.addColorStop(0, "#F06707");
radial.addColorStop(1, "#E34F12");
// Coloro la palla
 
Search WWH ::




Custom Search