HTML Canvas - arc() 方法

HTML Canvas 的arc() 方法是CanvasRenderingContext2D 接口的一部分，用于在 Canvas 元素的当前路径中添加弧线。

语法

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

CanvasRenderingContext2D.arc(x, y, radius, start_angle, end_angle, anti_clockwise);

参数

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

序号	参数及描述
1	x Canvas 元素中当前可用的路径，用于添加弧线。
2	y 应用于正在添加的路径的变换。
3	radius 要在画布元素上绘制的弧线的半径。
4	start_angle 以弧度为单位测量的，从 X 轴开始的弧线角度。
5	end_angle 以弧度为单位测量的，从 Y 轴开始的弧线角度。(原文描述有误，应是从X轴开始)
6	anti_clockwise 布尔值，如果为 false，则表示顺时针方向；如果为 true，则表示逆时针方向。默认值为 false。

返回值

根据传递的参数值，在画布元素上绘制一个弧线。

示例

以下示例使用 HTML Canvas arc() 方法在 Canvas 元素上绘制简单的弧线。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.arc(100, 100, 50, 0, 1.5 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.arc(250, 100, 50, 1.5 * Math.PI, 2 * Math.PI, false);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

输出

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

示例

以下示例使用 arc() 方法在 Canvas 元素上绘制一个填充的圆形。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="320" height="250" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.arc(150, 120, 100, 0, 2 * Math.PI);
         context.fill();
         context.closePath();
      </script>
   </body>
</html>

输出

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

示例

以下示例使用 arc() 方法在 Canvas 元素上绘制奥迪汽车标志。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="320" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.strokeStyle = '#8A8D8F';
         context.lineWidth = 4;
         context.arc(100, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(130, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(160, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(190, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

输出

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

html_canvas_paths.htm

打印页面