HOWTO · JavaScript
fillRect() Funktion in JavaScript
Dieser Artikel hilft Ihnen, die Funktionsweise der Methode fillRect in JavaScript zu verstehen.
In diesem Artikel erfahren Sie, wie Sie mit der JavaScript-Funktion fillRect() Rechtecke mit definierter Breite und Höhe auf einer Leinwand erstellen.
Verwenden Sie die fillRect()-Funktion in JavaScript
Die Funktion fillRect() des HTML-Canvas erzeugt ein gefülltes Rechteck auf der Webseite. Schwarz ist die Standardfarbe. Mit JavaScript können Sie mit dem Element canvas Bilder auf einer Webseite zeichnen.
Jede Leinwand enthält zwei Komponenten, die ihre Höhe und Breite bzw. Höhe und Breite angeben.
Syntax:
obj.fillRect(a, b, width, height);
Das a ist die x-Achsenposition des Anfangspunkts des Rechtecks und b ist die y-Achsenposition des Anfangspunkts des Rechtecks. Die width ist die Breite der Rechtecke, die sowohl positiv als auch negativ sein kann, wobei die positiven Werte rechts und die negativen Werte links angezeigt werden.
Die height ist die Höhe des Rechtecks und kann ebenfalls entweder positiv oder negativ sein. Positive Werte nehmen ab, während negative Werte zunehmen.
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fillRect</title>
</head>
<body>
<h1>fillRect canvas JavaScript</h1>
<canvas id="canvas" height="300" width="300">
</canvas>
</body>
<script>
function drRect() {
const canva = document.querySelector('#canvas');
if (!canva.getContext) {
return;
}
const rect = canva.getContext('2d');
rect.fillStyle = '#800080';
rect.fillRect(50, 50, 200, 250);
}
drRect();
</script>
</html>
Verwenden Sie die Methode document.querySelector(), um das Canvas-Element auszuwählen. Stellen Sie fest, ob der Browser die Canvas-API unterstützt.
Rufen Sie das 2D-Zeichnungskontextobjekt ab. Ändern Sie den Füllstil in #800080, Farbe lila und verwenden Sie die Funktion fillRect(), um das Rechteck zu zeichnen.
Das Rectangle hat eine Breite von 200 Pixel und eine Höhe von 250 Pixel, beginnend bei (50, 50).
Ausgabe:
