如何在 HTML5 中使用 arc() 繪製圓形？

arc() 是 canvas 2D API 的一種方法。arc() 方法允許您繪製圓弧。

語法

以下是使用 arc() 在 HTML5 中繪製圓形的語法

arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

arc() 方法生成一個半徑為 radius 的圓弧，其中心位於 (x, y)。路徑沿逆時針方向移動，從 **startAngle** 開始，到 **endAngle** 結束（預設為順時針方向）。

引數

以下是此方法的引數：

  • **X** - 圓弧中心的水平座標。

  • **Y** - 圓弧中心的垂直座標。

  • **Radius** - 圓弧的直徑。它必須是正數。

  • **StartAngle** - 圓弧開始處的角度，以弧度表示，相對於正 x 軸測量。

  • **EndAngle** - 圓弧的結束角度，以弧度表示，相對於正 x 軸測量。

  • **Counterclockwise** - 一個可選的布林值指示符。如果條件為真，則在開始和結束角度之間逆時針繪製圓弧，預設值為假（順時針）。

為了更好地理解如何在 HTML5 中使用 arc 繪製圓形，讓我們看看以下示例。

示例 1

在以下示例中，我們使用 arc() 在畫布上繪製一個圓形。為了獲得完整的圓形，我們必須將起始角度設定為 0，結束角度設定為 360。

<!DOCTYPE html>
<html>
<body>
   <canvas id="Varma" width="300" height="150"></canvas>
   
   <script>
      var c = document.getElementById("Varma");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 360);
      ctx.stroke();
   </script>

</body>
</html>

執行上述指令碼後，它將在網頁上生成一個顯示使用 ctx.arc 繪製的圓形的輸出。

示例 2

以下是另一個示例：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Canvas</title>
<head>
<body>
   <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
   
   <script>
      var c = document.getElementById("newCanvas");
      var ctxt = c.getContext("2d");
      ctxt.beginPath();
      ctxt.arc(100,75,50,0,2*Math.PI);
      ctxt.stroke();
   </script>

</body>
</html>

更新於：2022年10月12日

2K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

立即開始
廣告