如何在 HTML 中使用 clearRect 清除画布？

Canvas 2D API 的clearRect() 方法，用于通过将像素颜色设置为透明黑色 (rgba(0, 0, 0, 0))来擦除矩形区域中的像素。

句法：

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

参数：

• x, y：这些参数表示矩形框的左上角坐标。
• width：用于设置矩形框的宽度
• height：用于设置矩形框的高度

示例1：在下面的clearRect()方法用于从(50, 20) 中清除大小为(200×300) 的矩形的像素。

  

    
        How to clear the canvas
        using clearRect in HTML?
    

  

    
  
    
        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);
    

  

输出：

示例 2：

  

    
        How to clear the canvas
        using clearRect in HTML?
    

  

    
  
    
        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 traiangle
        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);
    

  

输出：

示例 3：在本示例中，我们将擦除整个画布。

  

    
        How to clear the canvas
        using clearRect in HTML?
    

  

    
  
    
        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);
    

  

注意：请注意， clearRect()可能会导致意外的副作用。确保在调用 clearRect() 之后开始绘制新项目之前调用clearRect() 。

参考： https://www.geeksforgeeks.org/html-canvas-clearrect-method/