Les deux principaux types de dégradés sont :
Pour définir une couleur on utilise la fonction
Enfin on assigne la propriété fillStyle pour appliquer le dégradé.
-
Linéaire (createLinearGradient)
le long d'un axe. -
Radial (createRadialGradient)
avec un centre et une extension circulaire.
- Linéaire:
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:
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);
0 commentaires: