Méthode createLinearGradient() de Canvas
Définition et utilisation
createLinearGradient() La méthode crée un objet de dégradé linéaire.
La dégradé peut être utilisée pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Astuce :Utilisez cet objet comme strokeStyle ou fillStyle La valeur de l'attribut.
Astuce :Utilisez addColorStop() La méthode spécifie différentes couleurs et où les couleurs sont positionnées dans l'objet gradient.
Exemple
Voir également :
Définissez une dégradé allant du noir au blanc (du gauche vers la droite) en tant que style de remplissage pour le rectangle :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Syntaxe
context.createLinearGradient(x0,y0,x1,y1);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| x0 | La coordonnée x du point de départ de la dégradé. |
| y0 | La coordonnée y du point de départ de la dégradé. |
| x1 | La coordonnée x de l'extrémité de la dégradé. |
| y1 | La coordonnée y de l'extrémité de la dégradé. |
Plus d'exemples
Exemple 2
Définissez une dégradé (du haut vers le bas) en tant que style de remplissage pour le rectangle :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Exemple 3
Définissez une dégradé allant du noir au rouge puis au blanc en tant que style de remplissage pour le rectangle :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Support du navigateur
Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
