如何在p5.js中用移动矩形实现文本的遮罩式显示效果？

要实现文本仅在移动矩形区域内显示的效果，你可以利用p5.js的**裁剪路径（clip）**功能，或者使用图形缓冲区（createGraphics）配合遮罩（mask）方法。下面是两种适合新手的实现方案：

方案1：使用裁剪路径（推荐，简单高效） #

这种方法直接在主画布上定义裁剪区域，文本只会在该区域内显示：

function setup() {
  createCanvas(400, 400);
  textSize(20);
  textAlign(CENTER, CENTER); // 让文本居中对齐，方便在矩形内显示
}

function draw() {
  background(220);
  
  // 计算三个矩形的位置（和你原代码逻辑一致）
  let x1 = map(mouseX, 0, 400, 100, 300);
  let x2 = map(mouseX, 0, 400, -200, 600);
  
  // 保存当前画布状态，避免裁剪影响后续绘制
  push();
  
  // 定义裁剪路径：将所有矩形的顶点组合成一个复合区域
  beginShape();
  // 第一个矩形的四个顶点
  vertex(mouseX, 150);
  vertex(mouseX + 600 + mouseX, 150);
  vertex(mouseX + 600 + mouseX, 150 + 50);
  vertex(mouseX, 150 + 50);
  // 第二个矩形的四个顶点
  vertex(x1, 215);
  vertex(x1 + 400 + mouseX, 215);
  vertex(x1 + 400 + mouseX, 215 + 50);
  vertex(x1, 215 + 50);
  // 第三个矩形的四个顶点
  vertex(x2, 280);
  vertex(x2 + 600 + mouseX, 280);
  vertex(x2 + 600 + mouseX, 280 + 50);
  vertex(x2, 280 + 50);
  endShape(CLOSE);
  
  // 启用裁剪：后续所有绘制仅在上述路径内可见
  clip();
  
  // 绘制文本（此时文本只会出现在矩形区域内）
  fill(0);
  text("仅矩形内可见的文本", width/2, 175);
  text("第二行文本", width/2, 240);
  text("第三行文本", width/2, 305);
  
  // 恢复画布状态，结束裁剪
  pop();
  
  // 绘制矩形边框（可选，方便直观看到遮罩区域）
  noFill();
  stroke(0);
  rect(mouseX, 150, 600+mouseX, 50);
  rect(x1, 215, 400+mouseX, 50);
  rect(x2, 280, 600+mouseX, 50);
}

工作原理： #

• push()/pop()：保存和恢复画布状态，确保裁剪只作用于文本绘制阶段，不会影响后续的矩形边框绘制。
• beginShape()/endShape(CLOSE)：将多个矩形的顶点组合成一个复合的裁剪路径。
• clip()：开启裁剪模式，之后的绘制内容只会显示在裁剪路径内部。

方案2：使用图形缓冲区+遮罩方法 #

这种方法适合需要更复杂遮罩（比如图片、渐变）的场景，通过两个图形缓冲区分别存储文本和遮罩，再将二者结合：

let maskLayer;

function setup() {
  createCanvas(400, 400);
  textSize(20);
  textAlign(CENTER, CENTER);
  maskLayer = createGraphics(width, height); // 创建遮罩缓冲区
}

function draw() {
  background(220);
  
  // 计算矩形位置
  let x1 = map(mouseX, 0, 400, 100, 300);
  let x2 = map(mouseX, 0, 400, -200, 600);
  
  // 清空遮罩层，绘制填充矩形（白色代表显示区域，透明代表隐藏区域）
  maskLayer.clear();
  maskLayer.fill(255);
  maskLayer.rect(mouseX, 150, 600+mouseX, 50);
  maskLayer.rect(x1, 215, 400+mouseX, 50);
  maskLayer.rect(x2, 280, 600+mouseX, 50);
  
  // 创建文本缓冲区并绘制文本
  let textLayer = createGraphics(width, height);
  textLayer.fill(0);
  textLayer.text("仅矩形内可见的文本", width/2, 175);
  textLayer.text("第二行文本", width/2, 240);
  textLayer.text("第三行文本", width/2, 305);
  
  // 为文本层应用遮罩：仅保留遮罩层非透明区域的文本
  textLayer.mask(maskLayer);
  
  // 将遮罩后的文本绘制到主画布
  image(textLayer, 0, 0);
  
  // 绘制矩形边框
  noFill();
  stroke(0);
  rect(mouseX, 150, 600+mouseX, 50);
  rect(x1, 215, 400+mouseX, 50);
  rect(x2, 280, 600+mouseX, 50);
}

工作原理： #

• createGraphics()：创建独立的图形缓冲区，分别处理遮罩和文本。
• mask()：将遮罩层应用到文本层，遮罩层的非透明像素会保留文本层对应位置的内容，透明像素则隐藏文本。

原代码的问题在于没有正确利用裁剪或遮罩机制，上面两种方案都能实现你需要的“文本在矩形下方，仅矩形区域可见”的效果。

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