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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| fillStyle() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Les ensembles de propriété 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 ; |
Valeurs de propriété
| Valeur | La description | Joue-le |
|---|---|---|
| color | Une valeur de couleur CSS qui indique la couleur de remplissage du dessin. Valeur par défaut est # 000000 | Joue-le " |
| gradient | Un objet de gradient ( linéaire ou radial ) utilisé pour remplir le dessin | |
| pattern | Un modèle objet à utiliser pour remplir le dessin |
autres exemples
Exemple
Définir un gradient (top to bottom) de (top to bottom) 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,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Essayez vous - même » Exemple
Définir un gradient (left to right) de (left to right) comme le style de remplissage du 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 vous - même » Exemple
Définir un dégradé qui va du noir, au rouge, au blanc, comme le style de remplissage du 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 vous - même » Image à utiliser:
Exemple
Utiliser 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 vous - même »