Méthode addColorStop() de Canvas
Définition et utilisation
addColorStop() La méthode spécifie les couleurs et les positions dans l'objet gradient.
La méthode addColorStop() avec createLinearGradient() ou createRadialGradient() Utilisés ensemble.
Remarque :Vous pouvez appeler plusieurs fois la méthode addColorStop() pour modifier le dégradé. Si vous n'utilisez pas cette méthode sur l'objet gradient, le dégradé ne sera pas visible. Pour obtenir un dégradé visible, vous devez créer au moins une étiquette de couleur.
Exemple
Exemple 1
Définir un dégradé allant du noir au blanc comme 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);
Astuce :Plus d'exemples sont disponibles en bas de la page.
Syntaxe
gradient.addColorStop(stop,color);
Valeur des paramètres
| Paramètres | Description |
|---|---|
| stop | Valeur comprise entre 0.0 et 1.0, indiquant la position entre le début et la fin du dégradé. |
| color | Valeur de couleur CSS affichée à la position de fin. |
Plus d'exemples
Exemple 2
Définir le dégradé en utilisant plusieurs méthodes addColorStop():
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);
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>.
