CanvasRenderingContext2D：arc() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.arc() 方法用于将一个圆弧添加到当前子路径中。

语法

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

arc() 方法创建一个以坐标 (x, y) 为中心，以 radius 为半径的圆弧。路径从 startAngle 开始，到 endAngle 结束，路径方向由 counterclockwise 参数决定（默认为顺时针方向）。

参数

x

圆弧中心（圆心）的 x 轴坐标。

y

圆弧中心（圆心）的 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");

// 绘制形状
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j * 50; // x 坐标
    let y = 25 + i * 50; // y 坐标
    let radius = 20; // 圆弧半径
    let startAngle = 0; // 圆弧起始角度
    let endAngle = Math.PI + (Math.PI * j) / 2; // 圆弧结束角度
    let counterclockwise = i % 2 === 1; // 是否逆时针绘制

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

    if (i > 1) {
      ctx.fill(); // 填充形状
    } else {
      ctx.stroke(); // 绘制形状轮廓
    }
  }
}

结果

规范

Specification
HTML
# dom-context-2d-arc-dev

浏览器兼容性

参见