Grafici con Canvas e SVG - HTML5 con CSS e JavaScript - page 230

context.fillStyle = radial;
context.fill();
// Disegno il contorno della palla
context.strokeStyle = "black";
context.stroke();
context.restore();
}
Nel codice ci sono molti spunti interessanti: innanzitutto la chiamata iniziale e finale delle
funzioni save e restore , che serve a garantire il chiamante sul ripristino dello stato.
Viene poi preparato il cerchio, con la chiamata a arcTo , che necessita di parametri per
indicare il centro, il raggio, l'angolo iniziale e finale (espressi in radiale) e se il sen so è
antiorario. Segue la chiamata a createRadialGradient che, in un unione a crea-
teLinearGradient , permette la creazione di un gradiente radiale o lineare.
Come in SVG, dobbiamo definire i due cerchi di inizio e di fine e i colori che compon-
gono il gradiente. Molto importante è il fatto che le coordinate del gradiente siano globali
per tutta la dimensione della clip corrente (il canvas ).
La funzione, poi, prosegue assegnando il colore di riempimento con il gradiente, lo
riempie, assegna il colore del contorno e lo disegna.
Entrambe le funzioni agiscono sul path corrente, che è il cerchio. Non ci resta, a questo
punto, che scrivere del testo per segnare banalmente il numero dei rimbalzi effettuati.
Scrivere testo sulla bitmap
La scrittura del testo segue la stessa logica vista finora, perciò, prima di procedere con la
scrittura, dobbiamo ricordarci di valorizzare quelle proprietà che ne determinano l'aspetto:
font , textAlign , textBaseline .
Ricordiamoci per un attimo che vogliamo disegnare in alto a destra il numero dei rim-
balzi. Anche questa volta, vediamo prima la funzione drawText nell'esempio 10.25 , per
poi commentarne il codice.
Esempio 10.25
function drawText() {
context.save();