p5.js | arc()函数

arc()函数是 p5.js 中的一个内置函数，用于绘制弧线。该函数接受 x 坐标、y 坐标、宽度、高度、开始、停止和可选参数模式七个参数。

句法：

arc(x, y, w, h, start, stop, mode)

参数：此函数接受上面提到的七个参数，如下所述：

• x：此参数用于保存椭圆弧的 x 坐标值。
• y：该参数用于保存椭圆弧的y坐标值。
• w：该参数取椭圆弧的宽度值。
• h：该参数取椭圆弧的高度值。
• start：该参数采用角度值开始弧，以弧度指定。
• stop：该参数取圆弧停止的角度值，单位为弧度。
• mode：这是一个可选参数，它决定了绘制弧线的方式是CHORD、PIE 还是 OPEN

• 程序 1：此程序使用 DEFAULT 模式。

  function setup() {
      createCanvas(400, 400);
  }
    
  function draw() {
      background('gray');
    
      // Quarter arc at 150, 55 of height and width 290px
      arc(150, 55, 290, 290, 0, HALF_PI); 
      fill('lightblue');
  }
  

  输出：
  

• 程序 2：该程序使用 OPEN 模式。

  function setup() {
      createCanvas(400, 400);
  }
    
  function draw() {
      background(220);
      fill('lightgreen');
    
      // An open arc at 150, 150 with radius 280
      arc(150, 150, 280, 280, 0, PI + QUARTER_PI, OPEN); 
  }
  

  输出：
  

• 程序 3：此程序使用 CHORD 模式。

  function setup() {
      createCanvas(400, 400);
  }
    
  function draw() {
      background(220);
      fill('orange');
    
      // A chord-arc at 150, 150 with radius 280
      arc(150, 150, 280, 280, 0, PI + QUARTER_PI, CHORD); 
  } 
  

  输出：
  

• 程序 4：该程序使用 PIE 模式。

  function setup() {
      createCanvas(400, 400);
  }
    
  function draw() {
      background(220);
      fill('blue');
        
      // A pie-arc at 150, 150 with radius 280
      arc(150, 150, 280, 280, 0, PI + QUARTER_PI, PIE); 
  } 
  

  输出：
  

参考资料： https://p5js.org/reference/#/p5/arc