Heim >Web-Frontend >H5-Tutorial >So verwenden Sie die fillRect-Methode
So verwenden Sie die fillRect-Methode
- 不言Original
- 2019-02-11 17:21:0912912Durchsuche
Die fillRect-Methode wird verwendet, um ein gefülltes Rechteck auf der Leinwand zu zeichnen. Die Syntax lautet „context.fillRect(x,y,width,height);“; " stellen die obere linke Ecke des Rechtecks dar. Die x- und y-Koordinaten der Ecken, „width“ und „height“ stellen die Breite und Höhe des Rechtecks dar.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
fillRect ist eine Methode in HTML5, mit der ein gefülltes Rechteck auf der Leinwand gezeichnet werden kann. Die Standardfüllfarbe ist Schwarz. Schauen wir uns die spezifische Verwendung der fillRect-Methode an.
Werfen wir zunächst einen Blick auf die grundlegende Syntax von fillRect
context.fillRect(x,y,width,height);
x stellt die x-Koordinate der oberen linken Ecke des Rechtecks dar.
y stellt die y-Koordinate der oberen linken Ecke des Rechtecks dar.
width gibt die Breite des Rechtecks an.
height gibt die Höhe des Rechtecks an.
(Referenz: HTML5-Leinwand)
Sehen wir uns ein konkretes Beispiel an
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="rectangle" width="200" height="200"></canvas>
<script>
// 使用JS获取canvas元素
var canvas=document.getElementById('rectangle');
// 获取canvas
var c=canvas.getContext('2d');
// 在画布上绘制一个矩形
c.fillRect(50,50,100,100);
</script>
</body>
</html>Der Effekt ist wie folgt: Zeichnen Sie ein mit Schwarz gefülltes Rechteck
Dieser Artikel endet hier. Weitere spannende Inhalte zum Frontend finden Sie in anderen verwandten Spalten-Tutorials PHP chinesische Website! ! !
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die fillRect-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!