如何使用p5.js实现图像遮罩：随机形状或PNG作为遮罩

你描述的需求完全可以在p5.js中实现，p5.js内置的mask()方法以及画布绘制API可以完美支持两种遮罩需求，以下是具体实现思路和示例代码：

实现方案1：使用随机形状生成遮罩 #

• 核心逻辑：先创建一个独立的离屏图形对象（调用createGraphics()），在这个离屏画布上绘制你需要的随机形状（随机圆形、多边形、不规则路径均可），再把这个离屏图形作为遮罩应用到目标图片上即可。
• 示例代码片段：

let img;
let maskGraphics;

function preload() {
  // 预加载你的目标图片
  img = loadImage('你的目标图片本地路径.jpg');
}

function setup() {
  createCanvas(800, 600);
  // 创建和图片尺寸一致的离屏画布用来生成遮罩
  maskGraphics = createGraphics(img.width, img.height);
  
  // 在离屏画布上绘制随机形状作为遮罩
  maskGraphics.noStroke();
  maskGraphics.fill(255); // 遮罩中白色区域会保留原图，透明/黑色区域会被隐藏
  // 示例：绘制100个随机位置的圆形组成遮罩
  for(let i = 0; i < 100; i++) {
    let x = random(maskGraphics.width);
    let y = random(maskGraphics.height);
    let r = random(10, 50);
    maskGraphics.circle(x, y, r);
  }
  
  // 把生成的随机形状遮罩应用到图片上
  img.mask(maskGraphics);
}

function draw() {
  background(220);
  // 绘制添加了遮罩的图片
  image(img, 0, 0);
}

注意：遮罩图形里只有亮度信息会生效，亮度越高的区域原图显示越完整，纯黑/完全透明区域的原图会被完全隐藏。

实现方案2：直接使用PNG图片作为遮罩 #

• 核心逻辑：提前准备好带有透明通道的PNG遮罩图，预加载之后直接调用mask()方法把PNG作为遮罩应用到目标图片即可，PNG的透明区域对应原图会被隐藏，不透明区域对应原图会保留。
• 示例代码片段：

let targetImg;
let maskPng;

function preload() {
  // 预加载目标原图和PNG遮罩图
  targetImg = loadImage('你的目标图片本地路径.jpg');
  maskPng = loadImage('你的PNG遮罩图本地路径.png');
}

function setup() {
  createCanvas(800, 600);
  // 直接应用PNG遮罩，建议保证遮罩图和目标图尺寸一致，避免拉伸变形
  targetImg.mask(maskPng);
}

function draw() {
  background(220);
  image(targetImg, 0, 0);
}

• 额外提示：如果需要实现动态变化的遮罩效果，可以把遮罩生成和应用的逻辑放到draw()函数中，每次渲染前重新生成遮罩图形即可。

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