Maison > interface Web > Tutoriel H5 > le corps du texte

Comment utiliser l'attribut fillstyle

不言
Libérer: 2021-04-20 16:50:54
original
5552 Les gens l'ont consulté

L'attribut fillstyle est utilisé pour remplir la couleur des graphiques dessinés, ainsi que pour implémenter des dégradés de couleurs et remplir des images ; la syntaxe d'utilisation de l'attribut fillstyle est "context.fillStyle=color|gradient|pattern". ;".

Comment utiliser l'attribut fillstyle

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

L'attribut fillstyle en HTML5 peut être utilisé pour remplir la couleur des graphiques dessinés, ainsi que pour implémenter des dégradés de couleurs et remplir des images. Dans l'article suivant, nous examinerons de plus près l'utilisation du fillstyle. attribut.

Jetons d'abord un coup d'œil à l'utilisation de base de l'attribut fillstyle

context.fillStyle=color|gradient|pattern;
Copier après la connexion

color représente la valeur de couleur CSS de la couleur de remplissage du dessin. La valeur par défaut est le noir

le dégradé représente l'objet dégradé (linéaire ou radial) qui remplit le dessin

le motif représente l'objet motif qui remplit le dessin

Regardons un exemple spécifique

Couleur de remplissage

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="pink";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
Copier après la connexion

L'effet est le suivant

Comment utiliser lattribut fillstyle

Dégradé de couleurs

Le code est le suivant

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"lightgreen");
my_gradient.addColorStop(1,"yellow");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
Copier après la connexion

L'effet est le suivant suit

Comment utiliser lattribut fillstyle

Remplir l'image

Le code est le suivant

<!DOCTYPE html>
<html>
<body>
<p>要用到的图片:</p>
<img  src="img/mouse.png" id="lamp" / alt="Comment utiliser l'attribut fillstyle" >
<p>Canvas:</p>
<button onclick="draw(&#39;repeat&#39;)">Repeat</button> 
<button onclick="draw(&#39;repeat-x&#39;)">Repeat-x</button> 
<button onclick="draw(&#39;repeat-y&#39;)">Repeat-y</button> 
<button onclick="draw(&#39;no-repeat&#39;)">No-repeat</button>     
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
function draw(direction)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height); 
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,300,200);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>
Copier après la connexion

L'effet de course est le suivant

Comment utiliser lattribut fillstyle

Cet article est ici Tout est ici. Pour un contenu plus passionnant, vous pouvez prêter attention à d'autres tutoriels de colonnes connexes sur le site Web PHP chinois ! ! !

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!