Toile HTML méthode addColorStop()
Exemple
Définissez 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);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
La méthode addColorStop() spécifie les couleurs et la position dans un objet dégradé.
La méthode addColorStop() est utilisée avec createLinearGradient() ou createRadialGradient() .
Remarque : Vous pouvez appeler la méthode addColorStop() plusieurs fois pour modifier un dégradé. Si vous omettez cette méthode pour les objets dégradés, le dégradé ne sera pas visible. Vous devez créer au moins un arrêt de couleur pour avoir un dégradé visible.
| Syntaxe JavaScript : | dégradé .addColorStop( stop , color ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Plus d'exemples
Exemple
Définissez un dégradé avec 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);
❮ Référence de canevas HTML