Fonction fillRect() en JavaScript

Shiv Yadav 15 février 2024

JavaScript JavaScript Method

Dans cet article, vous apprendrez à créer des rectangles avec une largeur et une hauteur définies sur un canevas à l’aide de la fonction JavaScript fillRect().

Utiliser la fonction `fillRect()` en JavaScript

La fonction fillRect() du canevas HTML produit un rectangle rempli sur la page Web. Noir est la couleur par défaut. En utilisant JavaScript, vous pouvez dessiner des images sur une page Web en utilisant l’élément canvas.

Chaque canevas contient deux composants qui indiquent respectivement sa hauteur et sa largeur, sa hauteur et sa largeur.

Syntaxe:

obj.fillRect(a, b, width, height);

Le a est la position sur l’axe des x du point de départ du rectangle et b est la position sur l’axe des y du point de départ du rectangle. La width est la largeur des rectangles, qui peut être à la fois positif et négatif, où les valeurs positives sont affichées à droite, tandis que les valeurs négatives sont affichées à gauche.

La height est la hauteur du rectangle, et elle peut également être positive ou négative. Les valeurs positives diminuent tandis que les valeurs négatives augmentent.

Exemple de code :

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

Exécuter le code

Utilisez la méthode document.querySelector() pour choisir l’élément canvas. Déterminez si le navigateur prend en charge l’API canvas.

Obtenez l’objet de contexte de dessin 2D. Changez le style de remplissage en #800080, couleur purple et utilisez la fonction fillRect() pour dessiner le rectangle.

Le Rectangle a une largeur de 200 pixels et une hauteur de 250 pixels, commençant à (50, 50).

Production:

Utiliser la fonction fillRect() en JavaScript

Auteur: 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.

Utiliser la fonction fillRect() en JavaScript

Article connexe - JavaScript Method

Utiliser la fonction `fillRect()` en JavaScript