p5.js | arc()函数

简介

arc()函数是 p5.js 绘图库中用于绘制圆弧的函数。它可以被用于绘制扇形、圆形、半圆以及其他任何圆弧形状。圆弧的位置、大小和起始角度可以通过调整参数来控制。该函数还可以与图形组合函数一起使用，以创建更复杂的形状。

语法

以下是 arc() 函数的完整语法：

arc(x, y, w, h, start, stop, [mode], [detail])

参数：

• x ：圆弧的中心 X 轴坐标
• y ：圆弧的中心 Y 轴坐标
• w ：圆弧的宽度
• h ：圆弧的高度
• start ：圆弧的起始角度
• stop ：圆弧的结束角度
• mode ：（可选参数）圆弧的模式（默认值为 PIE）
• detail ：（可选参数）圆弧的详细度（默认值为 50）

参数解析

• x 和 y

  这两个参数用于指定圆弧的中心位置。注意这两个参数并不是圆弧起始点，需要通过 start 参数来指定起始点。

• w 和 h

  这两个参数分别指定圆弧的宽度和高度，不一定是一个圆。如果指定的 w 和 h 相等，则会绘制一个圆。

• start 和 stop

  这两个参数用于定义圆弧的起始角度和结束角度。默认以弧度为单位，可以使用 radians() 函数将角度转换为弧度。

• mode

  这个参数用于指定圆弧的绘制模式，可以设置为 OPEN、CHORD 或 PIE。

  • OPEN：只绘制圆弧的边界线
  • CHORD：绘制圆弧和圆形之间的线，形成一个边缘
  • PIE：绘制一个完整的扇形，包括圆心

• detail

  这个参数用于指定圆弧细节的设置，即点的数量。默认值为 50，可以根据需要进行调整。

示例

绘制一个半圆：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  strokeWeight(5);
  stroke(0);
  arc(width/2, height/2, 200, 200, 0, PI);
}

绘制一个圆形：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  strokeWeight(5);
  stroke(0);
  arc(width/2, height/2, 200, 200, 0, TWO_PI);
}

结论

通过 arc() 函数，我们可以轻松地绘制扇形、圆形、半圆和其他任何圆弧形状。此外，我们还可以使用该函数与其他绘图函数结合起来，绘制出更复杂的形状。