Comment utiliser l'attribut fillstyle-Tutoriel H5-php.cn

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!