CanvasRenderingContext2D：arc() 方法

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下日期起在所有浏览器中可用： 2015年7月.

CanvasRenderingContext2D.arc() 方法是 Canvas 2D API 的一部分，用于向当前子路径添加圆弧。

语法

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

arc() 方法创建以 (x, y) 为中心、半径为 radius 的圆弧。路径从 startAngle 开始，到 endAngle 结束，并按照 counterclockwise 指定的方向（默认为顺时针）绘制。

参数

x

圆弧中心的水平坐标。

y

圆弧中心的垂直坐标。

radius

圆弧的半径。必须为正数。

startAngle

圆弧开始的角度（以弧度为单位），相对于正 x 轴测量。

endAngle

圆弧结束的角度（以弧度为单位），相对于正 x 轴测量。

counterclockwise 可选

一个可选的布尔值。如果为 true，则在开始和结束角度之间逆时针绘制圆弧。默认为 false（顺时针）。

返回值

无 (undefined).

示例

绘制完整圆形

此示例使用 arc() 方法绘制一个完整的圆形。

HTML

html
<canvas></canvas>

JavaScript

圆弧的 x 坐标为 100，y 坐标为 75，半径为 50。要绘制一个完整的圆形，圆弧从 0 弧度（0°）开始，到 2π 弧度（360°）结束。

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

结果

演示不同的形状

此示例绘制各种形状以展示 arc() 的功能。

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j * 50; // x coordinate
    let y = 25 + i * 50; // y coordinate
    let radius = 20; // Arc radius
    let startAngle = 0; // Starting point on circle
    let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
    let counterclockwise = i % 2 === 1; // Draw counterclockwise

    ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

结果

规范

规范
HTML 标准
# dom-context-2d-arc-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅