Tuto Canvas : Degradé

Les deux principaux types de dégradés sont :

• Linéaire (createLinearGradient) le long d'un axe.
• Radial (createRadialGradient) avec un centre et une extension circulaire.

Pour affecter un dégradé, il faut définir quelles sont les couleurs et points de début et d’arrêt.

• Linéaire:

Pour créer un dégradé linéaire, la fonction utilisée est :

createLinearGradient(x1, y1, x2, y2)

x1, y1 : Le point de départ.
x2, y2 : Le point d'arrivé.

Pour définir une couleur on utilise la fonction addColorStop(p,couleur), où p la position de la couleur dans le dégradé, entre 0 (couleur de départ) et 1 (couleur de fin).
Enfin on assigne la propriété fillStyle pour appliquer le dégradé.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

// Délimitation du début et de la fin du dégradé
var gradient = context.createLinearGradient(0,0,300,100);

// Ajout d'une première couleur
gradient.addColorStop(0,"red");     

// Ajout d'une deuxième couleur
gradient.addColorStop(1,"green");    

// Affectation du dégradé
context.fillStyle = gradient;            

// On trace un rectangle plein qui aura pour style le dégradé
context.fillRect(0,0,300,300); 

Résultat:

• Radial:

Pour créer un dégradé radial la fonction utilisée est :

createRadialGradient(x1, y1, r1, x2, y2, r2)

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var gradient = context.createRadialGradient(0,0,50,0,150,300);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(0.9,"blue");
context.fillStyle = gradient;
context.fillRect(0,0,300,300);

Résultat: