使用 p5.js 屏蔽或剪切蒙版

Question

我想在 P5.js 中使用一种形状（例如矩形）作为另一种形状（例如圆形或线条）的蒙版或剪切路径

我可以看到使用图像作为蒙版的解决方案，但不能看到形状。似乎mask()不是形状的函数：https : //p5js.org/reference/#/p5.Image/mask

Answer 1

是的你可以。

• 创建一个额外的渲染上下文createGraphics()。
• 在draw循环中为这个上下文绘制一些东西，这将是你的面具。结果中应该可见的任何内容都必须使用 alpha 通道着色，例如fill('rgba(0, 0, 0, 1)'。
• 将蒙版应用到您的原始图像myImage.mask(circleMask)。
• 您的原始图像现在已被蒙版修改，将其渲染在屏幕上： image(myImage, x, y, w, h)

这是一个工作代码示例：

let circleMask;
let myImage;

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

  circleMask = createGraphics(128, 128);

  myImage = loadImage('FzFH41IucIY.jpg');
}

function draw() {
  background(255);

  circleMask.fill('rgba(0, 0, 0, 1)');

  circleMask.circle(64, 64, 128);

  myImage.mask(circleMask);

  image(myImage, 200 - 64, 200 - 64, 128, 128);
}