Exemple
Définir un remplissage de couleur rouge pour le rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| fillStyle() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Les ensembles de propriétés fillStyle ou renvoie la couleur, dégradé ou motif utilisé pour remplir le dessin.
| Valeur par défaut: | # 000000 |
|---|---|
| Syntaxe JavaScript: | context.fillStyle=color|gradient|pattern; |
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur de remplissage du dessin. La valeur par défaut est # 000000 | Joue-le " |
| gradient | Un objet de gradient ( linéaire ou radial ) utilisé pour remplir le dessin | |
| modèle | Un pattern objet à utiliser pour remplir le dessin |
Autres exemples
Exemple
Définir un gradient (de haut en bas) que le style de remplissage pour le rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var 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);
Essayez - le vous - même » Exemple
Définir un gradient (de gauche à droite) comme le style de remplissage pour le rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var 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);
Essayez - le vous - même » Exemple
Définir un dégradé qui va du noir au rouge, au blanc, comme le style de remplissage pour le rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var 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);
Essayez - le vous - même » Image à utiliser:
Exemple
Utilisez une image pour remplir le dessin:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var
pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill(); Essayez - le vous - même »