单个shape中能否混合vertex与curveVertex绘制可填充的直线曲线组合图形？

为什么你现在的拼接方案无法填充 #

p5.js 中只有单条连续的闭合路径才能实现内部填充，你单独调用的arc()、line()都是独立的绘制元素，系统不会自动将它们合并为同一个闭合区域，因此无法生成你需要的填充效果。

最优实现方案：使用beginShape()定义自定义路径 #

你需要将所有直线段、曲线段的点位按连续顺序放在同一个beginShape()和endShape()的调用区间内，构成完整闭合路径后即可自动填充，你举的四分之一扇环示例可以参考以下实现：

function setup() {
  createCanvas(400, 400);
  fill(255, 120, 120); // 自定义填充色
  stroke(0); // 自定义描边色
  noLoop();
}

function draw() {
  const centerX = 200, centerY = 200;
  const innerRadius = 25, outerRadius = 75;
  const startAng = 0, endAng = HALF_PI; // 对应0-90度，p5内置弧度常量无需手动转换

  beginShape();
  // 1. 绘制外圆弧（顺时针从起始点到结束点）
  for (let ang = startAng; ang <= endAng; ang += 0.01) {
    vertex(
      centerX + cos(ang) * outerRadius,
      centerY + sin(ang) * outerRadius
    );
  }
  // 2. 绘制外弧终点到内弧终点的直线段
  vertex(
    centerX + cos(endAng) * innerRadius,
    centerY + sin(endAng) * innerRadius
  );
  // 3. 绘制内圆弧（逆时针从结束点返回起始点）
  for (let ang = endAng; ang >= startAng; ang -= 0.01) {
    vertex(
      centerX + cos(ang) * innerRadius,
      centerY + sin(ang) * innerRadius
    );
  }
  // 4. 闭合路径自动完成最后一段直线连接，同时触发填充
  endShape(CLOSE);
}

拓展用法 #

如果需要绘制更复杂的混合路径，可在beginShape()区间内组合不同的点位定义方法：

• 直线段端点用vertex()定义
• 二次贝塞尔曲线用quadraticVertex()定义
• 三次贝塞尔曲线用bezierVertex()定义
• 自由曲线路径用curveVertex()定义

只要所有点位按路径走向连续排列，最终闭合后都可以正常实现描边+填充效果。如果对性能要求更高，也可以将遍历角度生成圆弧顶点的逻辑替换为贝塞尔曲线绘制，不需要循环生成大量顶点。

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