HOWTO · JavaScript
Función fillRect() en JavaScript
Este artículo lo ayudará a comprender el funcionamiento del método fillRect en JavaScript.
En esta página
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>
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:
