HTML Canvas - clearRect() 方法

HTML Canvas 的clearRect()方法可以用來清除給定區域內的畫素資料，以及引數給定的點。

它來自CanvasRenderingContext2D介面，並將給定區域完全設定為白色。應清晰定義以避免任何導致方法無法工作的錯誤。

呼叫此方法時，傳遞的座標被視為矩形區域的左上角座標，該區域被設定為透明黑色。

語法

以下是HTML Canvas clearRect()方法的語法：

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

引數

以下是此方法的引數列表：

序號	引數和描述
1	x 矩形起始點的 x 座標值。
2	y 矩形起始點的 y 座標值。
3	width 繪圖矩形的寬度。
4	height 繪圖矩形的高度。

返回值

呼叫此方法時，將獲取由給定引數形成的矩形區域，並將畫素更改為白色。

示例

以下示例建立一個填充的矩形，並顯示HTML Canvas clearRect()方法如何從矩形中移除區域。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext('2d');
         context.fillStyle = 'orange';
         context.fillRect(10, 10, 250, 180);
         context.clearRect(30, 30, 50, 50);
      </script>
   </body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

示例

以下示例建立一個填充矩形，其寬度和高度與畫布元素相同，並顯示如何使用 clearRect() 方法設計簡單的形狀。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext('2d');
         context.fillRect(0, 0, 300, 200);
         context.clearRect(10, 100, 280, 10);
         context.clearRect(150, 10, 10, 180);
      </script>
   </body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

html_canvas_rectangles.htm

列印頁面