Exemple
Définir un gradient (left to right) de (left to right) qui va du noir au blanc, comme le style de remplissage du 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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createLinearGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le createLinearGradient() méthode crée un objet gradient linéaire.
Le gradient peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
Tip: Utilisez cet objet comme la valeur aux strokeStyle ou fillStyle propriétés.
Tip: Utiliser la 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 ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description |
|---|---|
| x0 | La coordonnée x du point de départ du gradient |
| y0 | La coordonnée y du point de départ du gradient |
| x1 | La coordonnée x du point d'extrémité du gradient |
| y1 | La coordonnée y du point d'extrémité du gradient |
autres exemples
Exemple
Définir un gradient (top to bottom) de (top to bottom) 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,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Essayez vous - même » Exemple
Définir un dégradé qui va du noir, au rouge, au blanc, comme le style de remplissage du 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 vous - même » <Canvas objet