p5.js技术问题：如何绘制不溢出矩形边界的圆弧？

核心解决方案：使用裁剪区域限制绘制范围 #

p5.js提供beginClip()和endClip()方法，可创建临时裁剪区域，该区域内绘制的图形会被限制在边界内，超出部分自动隐藏，完美匹配你的需求。

修改后的完整代码 #

JavaScript代码 #

function setup() {
  const canvasW = 680;
  const canvasH = 530;
  createCanvas(canvasW, canvasH);
  background(255)
  
  strokeWeight(1);
  noFill();

  const margin = 30;
  const numberOfSquaresX = 4;
  const numberOfSquaresY = 4;
  const squareWidth = (canvasW - margin) / numberOfSquaresX - margin;
  const squareHeight = (canvasH - margin) / numberOfSquaresY - margin;

  for (let i = 0; i < numberOfSquaresX; i++) {
    for (let j = 0; j < numberOfSquaresY; j++) {
      const x = margin + i * (squareWidth + margin);
      const y = margin + j * (squareHeight + margin);
       
      // 绘制矩形边框（不受裁剪影响）
      rect(x, y, squareWidth, squareHeight);
      
      // 开启裁剪区域：以当前矩形为边界
      beginClip();
      rect(x, y, squareWidth, squareHeight);
      
      // 绘制圆弧，溢出部分会被裁剪
      let dimension = random(5, 20);
      while (dimension <= squareWidth * 2) {
        arc(x, y + squareHeight, dimension, dimension, PI*1.5, TWO_PI);
        dimension = random(dimension + 5, dimension + 20);
      }
      
      // 结束裁剪，恢复正常绘制范围
      endClip();
    }
  }
  
}

CSS代码 #

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  margin: 0 auto;
}

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>

关键说明 #

• beginClip()之后绘制的第一个图形会作为裁剪边界，这里复用目标矩形，确保圆弧仅在矩形内部可见。
• 必须调用endClip()关闭裁剪区域，否则后续所有绘制都会被限制在该区域内。
• 矩形边框在裁剪前绘制，保证其完整显示（若需边框也受裁剪限制，可调整绘制顺序）。

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