fillRect() Funktion in JavaScript

Shiv Yadav 15 Februar 2024

JavaScript JavaScript Method

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>

Code ausführen

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:

Verwenden Sie die Funktion fillRect() in JavaScript

Autor: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

Verwenden Sie die fillRect()-Funktion in JavaScript

Verwandter Artikel - JavaScript Method

Verwenden Sie die `fillRect()`-Funktion in JavaScript