Exemple
Définir un gradient 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 | |||||
|---|---|---|---|---|---|
| addColorStop() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le addColorStop() méthode spécifie les couleurs et la position dans un objet gradient.
Le addColorStop() méthode est utilisée conjointement avec createLinearGradient() ou createRadialGradient() .
Remarque: Vous pouvez appeler le addColorStop() méthode plusieurs fois pour changer un gradient.Si vous omettez cette méthode pour les objets de gradient, le gradient ne sera pas visible. Vous devez créer au moins un arrêt de couleur pour avoir un gradient visible.
| Syntaxe JavaScript: | gradient.addColorStop(stop,color); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| stop | Une valeur comprise entre 0.0 et 1.0 qui représente la position entre le début et la fin dans un gradient | Joue-le " |
| color | Une valeur de couleur CSS pour afficher à la positiond'arrêt | Joue-le " |
Autres exemples
Exemple
Définir un gradient avec plusieurs addColorStop() méthodes:
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Essayez - le vous - même »