Méthode addColorStop()
Exemple
Définissez un dégradé allant du noir au blanc et utilisez-le pour remplir un rectangle :
JavaScript :
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Créer un dégradé
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// Dessiner un rectangle rempli
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100); Description
La méthode addColorStop() spécifie une couleur et une position dans un objet dégradé.
La méthode addColorStop() est utilisée avec des objets de dégradé linéaire et des objets de dégradé radial .
Remarque
Vous devez ajouter un point de couleur à un objet dégradé pour rendre le dégradé visible.
Voir aussi :
La méthode createLinearGradient() (Créer un objet dégradé)
La méthode createRadialGradient() (Créer un objet dégradé)
La propriété fillStyle (Définir la couleur/style de remplissage)
La propriété strokeStyle (Définir la couleur/style de contour)
Syntaxe
| gradient .addColorStop( stop , color ) |
Valeurs des paramètres
| Param | Description | Essayez-le |
|---|---|---|
| stop | Une valeur entre 0 et 1. La position entre le début et la fin du dégradé | |
| color | Une valeur de couleur CSS à afficher à la position stop |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Définissez un dégradé avec plusieurs méthodes addColorStop() :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const 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 des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
addColorStop() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |