Función fillRect() en JavaScript

Shiv Yadav 15 febrero 2024

JavaScript JavaScript Method

En este artículo, aprenderá cómo crear rectángulos con un ancho y una altura definidos en un lienzo utilizando la función fillRect() de JavaScript.

Usa la función `fillRect()` en JavaScript

La función fillRect() del lienzo HTML produce un rectángulo relleno en la página web. El color por defecto es el negro. Usando JavaScript, puede dibujar imágenes en una página web usando el elemento canvas.

Cada lienzo contiene dos componentes que indican su alto y ancho, alto y ancho, respectivamente.

Sintaxis:

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

La a es la posición del eje x del punto inicial del Rectángulo, y b es la posición del eje y del punto inicial del Rectángulo. El width es el ancho de los rectángulos, que pueden ser tanto positivos como negativos, donde los valores positivos se muestran a la derecha, mientras que los valores negativos se muestran a la izquierda.

La height es la altura del Rectángulo, y también puede ser positiva o negativa. Los valores positivos están disminuyendo mientras que los valores negativos están aumentando.

Código de ejemplo:

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

Ejecutar código

Utilice el método document.querySelector() para elegir el elemento del lienzo. Determine si el navegador es compatible con la API de lienzo.

Obtenga el objeto de contexto de dibujo 2D. Cambie el estilo de relleno a #800080, color purple y use la función fillRect() para dibujar el Rectángulo.

El Rectángulo tiene un ancho de 200 píxeles y una altura de 250 píxeles, comenzando en (50, 50).

Producción:

Usar la función fillRect() en 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.

Usa la función fillRect() en JavaScript

Artículo relacionado - JavaScript Method

Usa la función `fillRect()` en JavaScript