propriété html fillStyle qui définit ou renvoie le dégradé de couleur ou le motif utilisé pour remplir la peinture

Exemple

Définir un rectangle rempli de bleu :

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Navigateur support

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge fillStyle attribut.

Remarque : Internet Explorer 8 et versions antérieures ne prennent pas en charge l'élément

Définition et utilisation

La propriété fillStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir le tableau.

Valeur de l'attribut

Plus d'exemples

Exemple 1

Définissez un dégradé de haut en bas comme style de remplissage du 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);

Exemple 2

Définissez le dégradé de gauche à droite comme 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);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!