HTML Canvas - fill() 方法

HTML Canvas 的fill() 方法是 Canvas 2D API 的一部分，用於填充 Canvas 元素內的當前路徑或給定路徑。

預設情況下，它使用黑色填充路徑，可以使用fillStyle 屬性傳遞的顏色進行更改。

語法

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

CanvasRenderingContext2D.fill(path, fillrule)

引數

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

序號	引數及描述
1	path 要用於 fill() 方法的路徑。
2	fillrule 應用於檢查點是否在裁剪區域內或外的演算法。此方法的可能值為： non-zero even-odd

序號

引數及描述

path

要用於 fill() 方法的路徑。

fillrule

應用於檢查點是否在裁剪區域內或外的演算法。此方法的可能值為：

non-zero
even-odd

返回值

使用fillStyle 屬性傳遞的顏色（預設為黑色）填充給定的路徑。

示例 1

以下示例在 Canvas 元素上繪製一個菱形，並使用 HTML Canvas fill() 方法填充它。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="220" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(100, 50);
      context.lineTo(50, 100);
      context.lineTo(100, 150);
      context.lineTo(150, 100);
      context.closePath();
      context.fill();
   </script>
</body>
</html>

輸出

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

示例 2

以下示例在 Canvas 元素上繪製形狀，並使用 fillrule 演算法相應地填充它們。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="340" height="340" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.rect(20, 20, 300, 300);
      context.rect(50, 50, 200, 200);
      context.rect(80, 80, 100, 100);
      context.lineWidth = 5;
      context.stroke();
      context.fillStyle = 'blue';
      context.fill('evenodd');
      context.closePath();
   </script>
</body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面