如何在 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+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.