Propriété fillStyle du Canvas
Exemple
Définissez une couleur de remplissage rouge pour le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100); Plus d'exemples ci-dessous.
Description
La propriété fillStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir le dessin.
La valeur par défaut est #000000 (noir solide).
Voir aussi :
La propriété strokeStyle (Définir la couleur/style de contour)
La méthode fillRect() (Dessiner un rectangle rempli)
La méthode rect() (Dessiner un rectangle non rempli)
Syntaxe
| context .fillStyle = color | gradient | pattern |
Valeurs de propriété
| Valeur | Description | Jouez-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur de remplissage du dessin. La valeur par défaut est #000000 | |
| gradient | Un objet dégradé ( linéaire ou radial ) utilisé pour remplir le dessin | |
| pattern | Un objet motif à utiliser pour remplir le dessin |
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");
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100); Exemple
Définissez un dégradé (de gauche à droite) comme style de remplissage pour le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100); Exemple
Définissez un dégradé qui passe du noir, au rouge, au blanc, comme style de remplissage pour le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
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");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100); Image à utiliser :
Exemple
Utilisez une image pour remplir le dessin :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill(); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
fillStyle() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |