HTML Canvas - fillRect() 方法

HTML Canvas 的 fillRect() 方法可以用來填充給定區域，該區域由引數指定的點和尺寸定義。

它來自 CanvasRenderingContext2D 介面，在沒有提供顏色輸入時，會將給定區域完全填充為黑色。

在繪製矩形之前，我們可以使用上下文物件的 fillStyle 屬性提供顏色輸入。應明確定義顏色以避免任何錯誤導致方法無法工作。

呼叫此方法時，傳遞的座標被視為要填充的矩形區域的左上角座標，填充顏色使用提供的輸入或預設的黑色。

語法

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

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

引數

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

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

返回值

呼叫此方法時，會獲取由給定引數形成的矩形區域，並根據提供的輸入進行填充。

示例

以下示例建立了一個填充的矩形，並展示瞭如何使用 HTML Canvas 的 fillRect() 方法來實現。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext('2d');
         
         // creating filled rectangle with default color
         context.fillRect(10, 10, 200, 150);
         
         // creating filled rectangle using input color
         context.fillStyle = 'brown';
         context.fillRect(250, 10, 200, 150);
      </script>
   </body>
</html>

輸出

上述程式碼在網頁中返回的輸出如下：

示例

以下示例使用 fillStyle 屬性填充整個 HTMLCanvasElement 介面物件 canvas 區域。

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

輸出

上述程式碼在網頁中返回的輸出如下：

html_canvas_rectangles.htm

列印頁面