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

打印页面