HTML Canvas - ellipse() 方法

HTML Canvas 的 ellipse() 方法用於在 CanvasRenderingContext2D 介面的上下文物件的可用路徑上繪製橢圓弧。

此方法建立一個以 (x,y) 為中心的橢圓弧，其半徑分別為 x_radius 和 y_radius。路徑從 start_angle 開始繪製，在 end_angle 結束，方向由最後一個引數給出。

語法

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

CanvasRenderingContext2D.ellipse(x, y, x_radius, y_radius, rotation, start_angle, end_angle, direction);

引數

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

序號	引數及說明
1	x 橢圓中心的 x 座標。
2	y 橢圓中心的 y 座標。
3	x_radius 橢圓長軸的半徑。值必須為正數。
4	y_radius 橢圓短軸的半徑。值必須為正數。
5	rotation 橢圓的旋轉角度（以弧度表示）。
6	start_angle 橢圓從正 X 軸開始的角度。
7	end_angle 橢圓從 Y 軸結束的角度，以弧度表示。
8	direction 繪製橢圓的方向。它採用布林值，當給出 true 時，橢圓逆時針繪製。當給出 false 時，橢圓順時針繪製。預設情況下，橢圓順時針繪製。

返回值

此方法應用於 CanvasRenderingContext2D 介面上下文物件時，會在 Canvas 元素內部繪製一個橢圓。

示例

以下示例使用 HTML Canvas ellipse() 方法在 Canvas 元素內部繪製一個橢圓。實現程式碼如下所示。

<!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="200" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.beginPath();
         context.ellipse(90, 90, 30, 50, Math.PI / 3, 0, 2 * Math.PI)
         context.stroke();
      }
   </script>
</body>
</html>

輸出

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

示例

以下示例繪製一條線，將橢圓分成 Canvas 元素內部的兩部分。實現程式碼如下所示。

<!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="270" height="250" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.beginPath();
         context.ellipse(120, 120, 70, 50, 0, 0, 2 * Math.PI);
         context.stroke();
         context.beginPath();
         context.moveTo(25, 125);
         context.lineTo(225, 125);
         context.stroke()
         context.closePath();
      }
   </script>
</body>
</html>

輸出

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

示例

以下示例透過組合兩個半橢圓在 Canvas 元素內部繪製一個橢圓。實現程式碼如下所示。

<!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="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         
         // vertical ellipse
         context.beginPath();
         context.fillStyle = 'orange';
         context.ellipse(100, 100, 30, 50, 0, 0, Math.PI);
         context.fill();
         context.closePath();
         context.beginPath();
         context.fillStyle = 'green';
         context.ellipse(100, 100, 30, 50, 0, 0, Math.PI, true);
         context.fill();
         context.closePath();
         
         // horizantal ellipse
         context.beginPath();
         context.fillStyle = 'blue';
         context.ellipse(300, 100, 50, 30, 0, 0, Math.PI);
         context.fill();
         context.closePath();
         context.beginPath();
         context.fillStyle = 'purple';
         context.ellipse(300, 100, 50, 30, 0, 0, Math.PI, true);
         context.fill();
         context.closePath();
      }
   </script>
</body>
</html>

輸出

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

示例

以下示例在 Canvas 元素內部繪製半橢圓。實現程式碼如下所示。

<!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="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.beginPath();
         context.fillStyle = 'rgb(229,203,122)';
         context.ellipse(100, 100, 70, 50, Math.PI / 4, 0, Math.PI);
         context.fill();
         context.closePath();
         context.beginPath();
         context.fillStyle = 'rgb(69,1,1)';
         context.ellipse(200, 90, 70, 50, Math.PI / 4, 0, 2 * Math.PI);
         context.fill();
         context.closePath();
         context.beginPath();
         context.fillStyle = 'rgb(229,203,122)';
         context.ellipse(300, 70, 70, 50, Math.PI / 4, 0, Math.PI, true);
         context.fill();
         context.closePath();
      }
   </script>
</body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面