Exemple
Définir un gradient (de gauche à droite) qui va du noir au blanc, comme le 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); Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createLinearGradient() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le createLinearGradient() méthode crée un objet dégradé linéaire.
Le gradient peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Astuce: Utilisez cet objet comme la valeur aux strokeStyle ou fillStyle propriétés.
Astuce: Utilisez le addColorStop() méthode pour spécifier des couleurs différentes, et où positionner les couleurs de l'objet de gradient.
| Syntaxe JavaScript: | context.createLinearGradient(x0,y0,x1,y1); |
|---|
Paramètre valeurs
| Paramètre | La description |
|---|---|
| x0 | La coordonnée x du point du gradient de démarrage |
| y0 | La coordonnée y du point du gradient de démarrage |
| x1 | La coordonnée x du point du gradient de fin |
| y1 | La coordonnée y du point de fin du dégradé |
Autres exemples
Exemple
Définir un gradient (de haut en bas) que le 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);
Essayez - le vous - même » Exemple
Définir un dégradé qui va du noir au rouge, au blanc, comme le 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);
Essayez - le vous - même »