So verwenden Sie die fillRect-Methode-H5-Tutorial-php.cn

So verwenden Sie die fillRect-Methode

不言

Freigeben： 2022-04-06 19:09:39

Original

12885 Leute haben es durchsucht

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.

So verwenden Sie die fillRect-Methode

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);

Nach dem Login kopieren

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(&#39;rectangle&#39;);
        // 获取canvas
        var c=canvas.getContext(&#39;2d&#39;);
        // 在画布上绘制一个矩形
        c.fillRect(50,50,100,100);
    </script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt: Zeichnen Sie ein mit Schwarz gefülltes Rechteck

So verwenden Sie die fillRect-Methode

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!