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 APICanvasRenderingContext2D.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 Standard
# dom-context-2d-arc-dev

浏览器兼容性

BCD tables only load in the browser

参见