Exemple
Définir un gradient 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 | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le addColorStop() méthode spécifie les couleurs et les positions dans un objet de gradient.
Le addColorStop() méthode est utilisée conjointement avec createLinearGradient() ou createRadialGradient() .
Note: Vous pouvez appeler le addColorStop() méthode plusieurs fois pour changer un gradient. Si vous ne spécifiez pas cette méthode pour les objets gradient, le gradient ne sera pas visible. Vous devez créer au moins une butée de couleur pour avoir un gradient visible.
| syntaxe JavaScript: | gradient . addColorStop( stop , color ) ; |
|---|
Les valeurs des paramètres
| 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 de CSS pour afficher à l' stop la position | Joue-le " |
autres exemples
Exemple
Définir un gradient avec de multiples 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 vous - même »