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

列印頁面