p5.js绘制饼图时如何按百分比计算扇形弧的起止位置？

p5.js的arc()函数绘制扇形时默认使用弧度制，整圆对应的弧度为2π（你也可以提前调用angleMode(DEGREES)切换为角度制，整圆对应360度）。

• 单段扇形的角度跨度 = 百分比 * 整圆总角度（弧度制下是百分比 * 2π，角度制下是百分比 * 360）
• 多段扇形拼接时，下一段的起始角度 = 上一段的结束角度，首个扇形默认从0角度（对应圆心右侧的水平点）开始绘制即可
  20%占比的弧段对应的弧度跨度就是0.2 * 2π = 0.4π，切换为角度制就是72度。

function setup() {
  createCanvas(400, 400);
  // 习惯用角度计算的话可以取消下一行注释
  // angleMode(DEGREES);
  background(220);
  
  // 饼图基础参数
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 150;
  const targetPercent = 0.2; // 目标占比20%
  
  // 计算起止角度
  const startAngle = 0;
  const endAngle = targetPercent * TWO_PI; // TWO_PI是p5.js内置的2π常量
  // 角度制下把上一行替换为 const endAngle = targetPercent * 360;
  
  // 绘制20%的红色扇形
  fill(255, 100, 100);
  stroke(255);
  // arc参数：圆心x、圆心y、直径、直径、起始角、结束角、绘制模式（PIE就是完整扇形）
  arc(centerX, centerY, radius * 2, radius * 2, startAngle, endAngle, PIE);
  
  // 绘制剩余80%蓝色区域方便对比
  fill(100, 200, 255);
  arc(centerX, centerY, radius * 2, radius * 2, endAngle, TWO_PI, PIE);
}

function draw() {
}

如果要绘制多段拼接的饼图，只需要累加角度即可，比如三段占比30%、20%、50%的饼图参数：

• 30%段：起始0，结束0.3 * TWO_PI
• 20%段：起始0.3 * TWO_PI，结束(0.3+0.2) * TWO_PI = 0.5 * TWO_PI
• 50%段：起始0.5 * TWO_PI，结束TWO_PI

内容的提问来源于stack exchange，提问作者grammamoocow