P5.js如何限制图形仅在指定边界区域内绘制显示

p5.js 内置的clip() 方法可以完美满足你的需求，无需额外叠加遮挡图层，且支持多区域重复调用。

实现逻辑如下：

• 用push()和pop()配对包裹裁剪相关逻辑，隔离作用域，避免影响画布其他区域的绘制
• 先定义作为裁剪边界的正方形路径，调用clip()应用裁剪规则
• 裁剪生效后绘制的所有图形，仅会保留裁剪路径内部的部分，外部区域的内容会自动隐藏，不需要额外做遮挡处理

修改后的完整代码：

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

function draw() {
  background(220);
  noFill();
  translate(100, 100);

  // 隔离裁剪作用域
  push();
  // 定义裁剪用的正方形路径
  beginShape();
  vertex(-25, -25);
  vertex(75, -25);
  vertex(75, 75);
  vertex(-25, 75);
  endShape(CLOSE);
  // 应用裁剪，后续绘制仅保留正方形内部内容
  clip();

  // 绘制100个圆形
  for (var i = 0; i < 100; i++) {
    var circleX = random(2, 50);
    var circleY = random(2, 50);
    circle(circleX, circleY, 100);
  }
  // 结束裁剪作用域，后续绘制不受影响
  pop();

  // 绘制红色边界正方形
  stroke("red");
  square(-25, -25, 100);
}

如果需要在画布其他位置重复实现该效果，只需要在对应坐标位置重复这套push→定义裁剪路径→clip→绘制内容→pop的逻辑即可，不同裁剪区域之间不会互相干扰。

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