HTML Canvas - rect() 方法

HTML Canvas 的 rect() 方法是一个构造函数方法，可用于在 Canvas 元素内的当前路径上绘制矩形。

它来自 CanvasRenderingContext2D 接口，并将输入矩形添加到当前路径上。

调用此方法时，传递的坐标被视为要绘制的矩形的左上角坐标。提到的宽度和高度共同用于绘制矩形。

语法

以下是 HTML Canvas rect() 方法的语法：

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

参数

以下是此方法的参数列表：

序号	参数及描述
1	x 矩形起始点的 x 坐标值。
2	y 矩形起始点的 y 坐标值
3	width 绘制矩形的宽度。
4	height 绘制矩形的高度。

返回值

调用 rect() 方法时，输入参数值用于在 canvas 元素内的当前可用路径上绘制矩形。

示例

以下示例使用 HTML Canvas rect() 方法在当前路径上创建一个填充矩形。实现代码如下所示。

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

输出

上述代码在网页上返回的输出如下：

示例

以下示例使用 rect() 方法在当前路径上使用三个矩形创建德国国旗。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            // germany flag
            context.beginPath();
            context.fillStyle = 'black';
            context.rect(50, 10, 200, 50);
            context.fill();
            context.closePath();
            context.beginPath();
            context.fillStyle = 'red';
            context.rect(50, 60, 200, 50);
            context.fill();
            context.closePath();
            context.beginPath();
            context.fillStyle = 'gold';
            context.rect(50, 110, 200, 50);
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出如下：

html_canvas_rectangles.htm

打印页面