Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Guida ad HTML5: l’elemento canvas, sfumature
Scritto da Pellegrino Principe il 19-07-2010 ore 10:39
Intel Parallel Studio XE
Le forme geometriche possono essere riempite non solo con colori solidi, ma anche con delle sfumature (gradienti), ovvero con la combinazione di due o più colori, che consentano di creare degli effetti di transizione del colore risultante. In HTML5 possiamo creare: sfumature lineari, dove un colore parte da un punto iniziale e, procedendo in linea retta, si modifica fino a un punto finale; sfumature radiali dove un colore parte da un punto iniziale e, procedendo lungo il raggio di un cerchio, si modifica fino al punto finale.

Per creare i gradienti abbiamo a disposizione le seguenti funzioni, che ritorneranno un oggetto di tipo CanvasGradient, il quale potrà essere passato come valore alle funzioni fillStyle, o strokeStyle:
  • createLinearGradient(x_point0, y_poiny0, x_point1, y_point1), con cui creiamo un gradiente, disegnato lungo una linea, che parte dal punto indicato dalle coordinate fornite dai parametri x_point0, y_point_0, e termina al punto indicato dalle coordinate fornite dai parametri x_point1, y_point1;
  • createRadialGradient(start_circle_x, start_circle_y, start_circle_radius, end_circle_x, end_circle_y, end_circle_radius), con cui creiamo un gradiente, disegnato lungo una sorta di cono tra due cerchi, che inizia con il cerchio di partenza, fornito dai parametri start_circle_x, start_circle_y, con raggio fornito dal parametro start_circle_radius e termina con il cerchio finale, fornito dai parametri end_circle_x, end_circle_y, con raggio fornito dal parametro end_circle_radius.
Per definire invece i colori, che costituiranno la sfumatura, dobbiamo utilizzare la seguente funzion,e invocata su un oggetto di tipo CanvasGradient:
  • addColorStop(offset, color), con cui creiamo un colore che farà parte della sfumatura. Il parametro offset indica la posizione del colore nella sfumatura e può assumere valori che vanno da 0 (inizio del gradiente) a 1 (fine del gradiente). Tra il valore 0 e il valore 1 possiamo porre valori intermedi espressi in decimali (es. 0.1, 0.5 ecc.). Il parametro color indica il valore del colore, espresso come tipo stringa e nel formato colore CSS.
Vediamo uno snippet che crea all’interno del canvas un rettangolo e un cerchio riempiti il primo con una sfumatura lineare e il secondo con una sfumatura radiale:
  1. if (context && context.createLinearGradient && context.createRadialGradient)
  2. {
  3.     // creo un oggetto CanvasGradient lineare
  4.     var linear_canvas_gradient = context.createLinearGradient(0, 0, 250, 150);
  5.  
  6.     // aggiungo i colori della sfumatura
  7.     linear_canvas_gradient.addColorStop(0, "red");
  8.     linear_canvas_gradient.addColorStop(1, "yellow");
  9.  
  10.     // fillStyle di tipo gradiente
  11.     context.fillStyle = linear_canvas_gradient;
  12.  
  13.     // disegno il rettangolo
  14.     context.fillRect(0, 0, 250, 150);
  15.  
  16.     // creo un oggetto CanvasGradient radiale
  17.     var radial_canvas_gradient = context.createRadialGradient(450, 100, 0, 400, 150, 100);
  18.  
  19.     // aggiungo i colori della sfumatura
  20.     radial_canvas_gradient.addColorStop(0, "white");
  21.     radial_canvas_gradient.addColorStop(0.5, "brown");
  22.     radial_canvas_gradient.addColorStop(1, "black");
  23.  
  24.     // fill style di tipo gradiente
  25.     context.fillStyle = radial_canvas_gradient
  26.  
  27.     // creo un cerchio
  28.     context.beginPath();
  29.     context.arc(400, 150, 100, 0, Math.PI * 2, false);
  30.     context.fill();
  31. }
Il risultato dell'esecuzione del codice è visualizzato dalla seguente immagine:

4808191126_98866095dd_z_d.jpg

Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: I cinque migliori linguaggi di scripting per JVM
Successiva: Nuovi metodi per nascondere codice malevolo
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.538 secondi.