¿Cómo borrar el lienzo usando clearRect en HTML?

El método clearRect() de la API Canvas 2D que se utiliza para borrar el píxel en un área rectangular configurando el color del píxel en negro transparente (rgba(0, 0, 0, 0)) .
Sintaxis: 

abc.clearRect(x, y, width, height);

Parámetros: 

  • x, y: estos parámetros representan la coordenada superior izquierda de la caja rectangular.
  • ancho: Se utiliza para establecer el ancho de la caja rectangular
  • altura: Se utiliza para fijar la de la caja rectangular

Ejemplo 1: En el siguiente ejemplo, se utiliza el método clearRect() para borrar el píxel de un rectángulo de tamaño (200×300) de (50, 20).

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to clear the canvas
        using clearRect in HTML?
    </title>
</head>
 
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById("canvas");
        const abc = canvas.getContext('2d');
     
        abc.beginPath();
        abc.fillStyle = "red";
        abc.fillRect(0, 0, 200, 300);
     
        abc.clearRect(50, 20, 100, 100);
    </script>
</body>
 
</html>

Producción: 

Ejemplo 2: 

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to clear the canvas
        using clearRect in HTML?
    </title>
</head>
 
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById("canvas");
        const abc = canvas.getContext('2d');
          
        // Draws a rectangle of 200x300
        abc.beginPath();
        abc.fillStyle = "red";
        abc.fillRect(0, 0, 200, 300);
          
        // Draws a triangle
        abc.beginPath();
        abc.fillStyle = "green";
        abc.moveTo(10, 10);
        abc.lineTo(150, 10);
        abc.lineTo(120, 120);
        abc.closePath();
        abc.fill();
      
        abc.clearRect(40, 25, 100, 70);
    </script>
</body>
 
</html>

Producción: 

Ejemplo 3: En este ejemplo, borraremos todo el lienzo. 

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to clear the canvas
        using clearRect in HTML?
    </title>
</head>
 
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById("canvas");
        const abc = canvas.getContext('2d');
      
        abc.beginPath();
        abc.fillStyle = "red";
        abc.fillRect(0, 0, 200, 300);
          
        // This line will erase whole canvas and
        // we will get an empty screen
        abc.clearRect(0, 0, canvas.width, canvas.height);
    </script>
</body>
 
</html>

Nota: tenga en cuenta que clearRect() puede causar efectos secundarios no deseados si no utiliza las rutas correctamente. Asegúrese de llamar a beginPath() antes de comenzar a dibujar nuevos elementos después de llamar a clearRect().
Referencia: https://www.geeksforgeeks.org/html-canvas-clearrect-method/

Publicación traducida automáticamente

Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *