Canvas createLinearGradient() Méthode
Exemple
Définissez un dégradé (de gauche à droite) allant du noir au blanc, comme style de remplissage pour le 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 createLinearGradient() crée un objet dégradé linéaire.
Cet objet dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.
L'objet dégradé peut être utilisé comme valeur pour les propriétés strokeStyle ou fillStyle .
Remarque
Vous devez ajouter un point d'arrêt de couleur à un objet dégradé pour le rendre visible.
Voir aussi :
La méthode createRadialGradient() (Créer un objet dégradé)
La méthode addColorStop() (Ajouter un point d'arrêt de 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
| context .createLinearGradient( x0, y0, x1, y1 ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| x0 | La coordonnée x du point de départ du dégradé | |
| y0 | La coordonnée y du point de départ du dégradé | |
| x1 | La coordonnée x du point d'arrivée du dégradé | |
| y1 | La coordonnée y du point d'arrivée du dégradé |
Valeur de retour
| Type | Description |
|---|---|
| Objet | Objet dégradé linéaire |
Plus d'exemples
Exemple
Définissez un dégradé (de haut en bas) comme style de remplissage pour le rectangle :
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Créer un dégradé
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
// Remplir le rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100); Exemple
Définissez un dégradé allant du noir, au rouge, puis au blanc, comme style de remplissage pour le rectangle :
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Créer un dégradé
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
// Remplir le rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
createLinearGradient() est pris en charge par tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |