Gradiente su Canvas HTML

Canvas - Trasformazioni

Le trasformazioni possono essere utilizzate per riempire rettangoli, cerchi, linee, testi e altro. Le forme sulla tela non sono limitate a colori puri.

Ci sono due tipi diversi di trasformazioni:

• createLinearGradient(x,y,x1,y1) - Creare una trasformazione lineare
• createRadialGradient(x,y,r,x1,y1,r1) - Creare una trasformazione radiale/circolare

Una volta che abbiamo l'oggetto della trasformazione, dobbiamo aggiungere due o più etichette di colore.

Il metodo addColorStop() specifica il punto di fermata del colore e la posizione lungo la trasformazione. La posizione della trasformazione può essere qualsiasi valore tra 0 e 1.

Per utilizzare una trasformazione, impostare l'attributo fillStyle o strokeStyle su una trasformazione e disegnare la forma (rettangolo, testo o linea).

Utilizzare createLinearGradient()

Esempio

Creare una trasformazione lineare. Riempire il rettangolo con la trasformazione:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prova personalmente

Utilizzare createRadialGradient():

Esempio

Creare una trasformazione radiale/circolare. Riempire il rettangolo con la trasformazione:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prova personalmente

Vedi anche:

Manuale completo di Canvas su CodeW3C.com