p5.js 图像掩码() 方法

简介

图像掩码() 是 p5.js 中的一个图像处理方法，它可以用于将一个图像掩码应用于另一个图像上，从而实现图像的遮罩效果。图像掩码通过在图像上创建一个具有相同尺寸的像素遮罩，然后将遮罩中非透明的像素应用到源图像上，从而实现遮罩效果。

语法

图像掩码(maskImage);

• maskImage：一个 p5.Image 对象，作为遮罩图像。

示例

let img; // 源图像
let maskImg; // 遮罩图像

function preload() {
  // 加载图像
  img = loadImage('source.jpg');
  maskImg = loadImage('mask.png');
}

function setup() {
  createCanvas(400, 400);
  // 调整图像尺寸和遮罩尺寸相同
  img.resize(400, 400);
  maskImg.resize(400, 400);
}

function draw() {
  background(0);
  // 应用图像掩码
  img.mask(maskImg);
  // 绘制图像
  image(img, 0, 0);
}

说明

• 在使用 图像掩码() 方法前，需要先加载源图像和遮罩图像。
• 使用 resize() 方法可以调整图像和遮罩的尺寸，使其相同。
• 在 draw() 函数中，首先清除背景，并在源图像上应用遮罩图像来实现遮罩效果。
• 最后，使用 image() 方法将图像绘制到画布上。

注意事项

• 源图像和遮罩图像的尺寸需要相同。
• 遮罩图像中，透明像素将不会被应用到源图像上。

更多关于 p5.js 图像处理方法的详细说明，请参考 p5.js 官方文档。