Gradiente Canvas HTML5

La dissolvenza HTML5 Canvas può essere utilizzata come modello di colore per riempire o tracciare forme, non come colore puro. La dissolvenza è un modello di colore che cambia da un colore a un altro. La dissolvenza ha due tipi: Lineare (线性) e Radiale (径向).

La dissolvenza HTML5 Canvas può essere utilizzata come modello di colore per riempire o tracciare forme, non come colore puro. La dissolvenza è un modello di colore che cambia da un colore a un altro. Ecco alcuni esempi per illustrare il mio punto.

Ci sono due tipi di dissolvenza:

1. Lineare (线性)

2. Radiale (径向)

La dissolvenza lineare utilizza un pattern lineare orizzontale, verticale o diagonale per cambiare il colore.
La dissolvenza radiale utilizza un pattern circolare per cambiare il colore, cambiando il colore dall'interno verso l'esterno.
Entrambi i tipi di dissolvenza sono descritti in questo articolo.

Dissolvenza lineare

Come precedentemente descritto, la dissolvenza lineare utilizza un pattern lineare per cambiare il colore. La dissolvenza lineare viene creata utilizzando la funzione del contesto 2D createLinearGradient(). Ecco un esempio:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
　　　　
var x1 =          0;
var y1 =          0;
var x2 = 100;
var y2 =          0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

La funzione createLinearGradient() utilizza 4 parametri: x1, y1, x2, y2. Questi 4 parametri determinano la direzione e l'estensione del pattern di dissolvenza. La dissolvenza parte dal primo punto x1, y1 e si estende al secondo punto x2, y2.
Creare una progressione orizzontale modificando solo i valori dei parametri dell'asse x (per x1 e x2), come segue:

　　　　var x1 =          0;
　　　　var y1 =          0;          var x2 = 100;
　　　　var y2 =          0;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Creare una progressione verticale modificando solo i valori dei parametri dell'asse y (per y1 e y2), come segue:

　　　　var x1 =          0;          var y1 =          0;
　　　　var x2 =          0;          var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Creare una progressione diagonale modificando contemporaneamente i parametri dell'asse x e y. Ecco un esempio:

　　　　var x1 =          0;
　　　　var y1 =          0;
　　　　var x2 = 100;
　　　　var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Stop di colore

L'esempio sopra non mostra i colori della progressione. Per impostare i colori della progressione, puoi utilizzare la funzione addColorStop() sull'oggetto di progressione. Ecco un esempio:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255,    0,    0)');
linearGradient1.addColorStop(1, 'rgb(    0,    0,    0)');

La funzione addColorStop() ha due parametri. Il primo parametro è un numero tra 0 e 1. Questo numero indica la distanza in cui il stop di colore verrà posizionato nella regione di progressione. Il secondo parametro è il colore stesso. Nota come in questo esempio viene utilizzata la rappresentazione del colore rgb(red, green, blue), dove ogni valore di rosso/green/nero può essere un numero tra 0 e 255 (espresso in un byte).
L'esempio sopra aggiunge due stop di colore. Il primo è il rosso, impostato per iniziare dalla parte iniziale della progressione (il primo parametro è 0). Il secondo colore è il nero, impostato per essere posizionato alla fine della regione di progressione (il primo parametro è 1).
Puoi aggiungere due o più stop di colore alla progressione. Ecco un esempio con tre stop di colore:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');

Questo esempio aggiunge un blu situato nel centro della progressione. La progressione passerà quindi dal rosso al blu in modo fluido, poi al nero.

Usare la progressione come stile di riempimento o contorno

Puoi utilizzare la progressione come stile di riempimento o tratto. Basta impostare l'attributo fillStyle o strokeStyle del contesto 2D su un oggetto di progressione per completare l'operazione. Ecco un esempio:

var linearGradient1 = context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

Ora puoi utilizzare le sfumature come colori di riempimento o di contorno per disegnare. Ecco un esempio di disegno di due rettangoli - uno riempito, l'altro contornato (riassunto):

<canvas id="ex2" width="500" height="125" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(0, 0, 100, 0); // gradient orizzontale
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10, 10, 100, 100);
var linearGradient2 = context.createLinearGradient(125, 0, 225, 0); // gradient orizzontale
linearGradient2.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient2.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient2.addColorStop(1, 'rgb(0, 0, 0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125, 10, 100, 100);
</script>

Questo è il risultato di disegnare sulla tela:

Intervallo della gradazione

È importante comprendere l'estensione della gradazione. Se la gradazione si estende da x = 10 a x = 110, solo i grafici con x tra 10 e 110 applicheranno il colore di gradazione. I grafici disegnati al di fuori di questa area saranno influenzati dalla gradazione, ma saranno disegnati con il primo o ultimo colore di gradazione.
Ad esempio, supponiamo che una gradazione si estenda da x = 150 a x = 350. La gradazione passerà dal blu al verde. Tutti i grafici disegnati con x meno di 150 saranno disegnati in blu. Tutti i grafici disegnati con x maggiore di 350 saranno disegnati in verde. Solo i grafici con x tra 150 e 350 avranno un colore di gradazione.
Questo è un esempio di codice che utilizza la gradazione menzionata per disegnare 5 rettangoli, per illustrare questo punto

<canvas id="ex3" width="500" height="250" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas non supportato
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(150, 0, 350, 0);
linearGradient1.addColorStop(0, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10, 130, 100);
context.fillRect(150,10, 200, 100);
context.fillRect(360,10, 130, 100);
context.fillRect(100,120, 150, 100);
context.fillRect(280,120, 150, 100);
</script>

Questo è il risultato del disegno sul canvas. Notate che solo le immagini con valori x tra 150 e 350 hanno un colore di gradazione, mentre il resto delle immagini sono completamente blu (prima etichetta di colore) o completamente verdi (ultima etichetta di colore).

Questo esempio utilizza solo 2 colori nella gradazione, ma se si utilizzano 3 o più colori, l'effetto è lo stesso. Al di fuori dell'area di gradazione, si utilizzano solo i primi e gli ultimi colori di fermata.
Il grado di gradazione è importante per comprendere correttamente la colorazione della forma. In molti casi, potrebbe essere necessario definire una gradazione specifica per ogni forma per adattarla all'area di disegno.

Gradazione radiale

Il tipo di gradazione radiale è un disegno circolare che parte da un colore interno e si estende a uno o più colori diversi. Ecco alcuni esempi grafici:

La gradazione radiale è definita da 2 cerchi. Ogni cerchio ha un punto centrale e un raggio. Ecco un esempio di codice:

var x1 = 100; // x del punto centrale del 1° cerchio
var y1 = 100; // y del punto centrale del 1° cerchio
var r1 = 30; // raggiolo del 1° cerchio
var x2 = 100; // x del punto centrale del 2° cerchio
var y2 = 100; // y del punto centrale del 2° cerchio
var r2 = 100; // raggiolo del 2° cerchio
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　　　0)');
context.fillStyle　=　radialGradient1;
context.fillRect(10,10,　200,　200);

Come vedete, sono stati definiti due punti centrali (x1, y1 e x2, y2) e due raggi (r1 e r2). Questi vengono passati come parametri alla funzione createRadialGradient() nel contesto 2D.
Dovrebbero essere definite due cerchi con diversi raggi, quindi produrranno un cerchio interno e un cerchio esterno (almeno in dimensioni). Poi, i colori nella gradazione si estenderanno da un cerchio all'altro.
Il funzionamento delle etichette di colore è lo stesso della gradazione lineare. Definiscono quale colore utilizzare nella gradazione e dove posizionare il colore nel intervallo di gradazione.
Le etichette di colore aggiunte si incontrano in qualche punto tra i due cerchi. Ad esempio, il primo parametro 0 nella fermata del colore rappresenta che il colore inizierà dal punto del primo cerchio. Il primo parametro 1 nella fermata del colore rappresenta che il colore inizierà dal punto del secondo cerchio.
Questo è il risultato del codice di disegno su un canvas HTML5:

Se due cerchi hanno lo stesso punto centrale, la gradazione sarà completamente circolare e i colori si dissolveranno dall'interno del cerchio all'esterno. Se i punti centrali dei due cerchi sono diversi, la gradazione sarà più simile a un cono, come la luce proiettata da una lampada (non ortogonalmente verso la superficie). Ecco un esempio di codice simile a un cono:

var x1 = 100;
var　y1　=　100;
var　r1　=　30;
var　x2　=　150;
var　y2　=　125;
var　r2　=　100;
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　　　0)');
context.fillStyle　=　radialGradient1;
context.fillRect(10,10,　200,　200);

Ecco come appare quando si disegna una progressione sullo schermo: