Maison > interface Web > tutoriel HTML > propriété html fillStyle qui définit ou renvoie le dégradé de couleur ou le motif utilisé pour remplir la peinture

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

黄舟
Libérer: 2017-11-04 09:24:11
original
3116 Les gens l'ont consulté

Exemple

Définir un rectangle rempli de bleu :

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

JavaScript :

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

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.

默认值:#000000
JavaScript 语法:context.fillStyle=color|gradient|pattern;

Valeur de l'attribut

< / table>

Plus d'exemples

Exemple 1

Définissez un dégradé de haut en bas comme style de remplissage du rectangle :

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

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);
Copier après la connexion

Exemple 2

Définissez le dégradé de gauche à droite comme style de remplissage du rectangle :

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

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);
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
ValeurDescription
couleur Une valeur de couleur CSS indiquant la couleur de remplissage du dessin. La valeur par défaut est #000000
gradientDégradé utilisé pour remplir la cible du dessinObjet
描述
color指示绘图填充色的 CSS 颜色值。默认值是 #000000
gradient用于填充绘图的渐变对象(线性或放射性)
pattern用于填充绘图的 pattern 对象
(linéaire ou radioactif)
pattern Objet Pattern utilisé pour remplir le dessin