So verwenden Sie das Fillstyle-Attribut-H5-Tutorial-php.cn

So verwenden Sie das Fillstyle-Attribut

不言

Freigeben： 2021-04-20 16:50:54

Original

5552 Leute haben es durchsucht

Das Fillstyle-Attribut wird zum Ausfüllen der Farbe der gezeichneten Grafiken sowie zum Implementieren von Farbverläufen und Füllbildern verwendet. Die Verwendungssyntax des Fillstyle-Attributs lautet „context.fillStyle=color|gradient|pattern“. ;".

So verwenden Sie das Fillstyle-Attribut

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Das Fillstyle-Attribut in HTML5 kann zum Füllen der Farbe gezeichneter Grafiken sowie zum Implementieren von Farbverläufen und zum Füllen von Bildern verwendet werden. Im folgenden Artikel werden wir uns die Verwendung des Fillstyle genauer ansehen Attribut.

Werfen wir zunächst einen Blick auf die grundlegende Verwendung des fillstyle-Attributs

context.fillStyle=color|gradient|pattern;

Nach dem Login kopieren

color stellt den CSS-Farbwert der Zeichnungsfüllfarbe dar. Der Standardwert ist Schwarz.

Verlauf stellt das Verlaufsobjekt (linear oder radial) dar, das die Zeichnung ausfüllt.

Muster stellt das Musterobjekt dar, das die Zeichnung ausfüllt.

Sehen wir uns a an konkretes Beispiel

Füllfarbe

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt

So verwenden Sie das Fillstyle-Attribut

Farbverlauf

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt

So verwenden Sie das Fillstyle-Attribut

Bild füllen

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img  src="img/mouse.png" id="lamp" / alt="So verwenden Sie das Fillstyle-Attribut" >
<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>

Nach dem Login kopieren

Der Laufeffekt ist wie folgt

So verwenden Sie das Fillstyle-Attribut

Dieser Artikel endet hier. Für weitere spannende Inhalte können Sie auf andere verwandte Kolumnen-Tutorials auf der chinesischen PHP-Website achten! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Fillstyle-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!