使用 p5js 创建图像掩码答案

【问题标题】：Create a image-mask with p5js使用 p5js 创建图像掩码
【发布时间】：2021-10-30 21:11:41
【问题描述】：

我想弄清楚是否有可能有一个空白画布，然后放置一个图像并用随机形状遮盖它？或者使用 png 作为掩码。

谢谢

【问题讨论】：

标签： javascript image mask p5.js

【解决方案1】：

是的，mask() 类上的 mask() 函数是可能的，而且非常简单（可惜他们没有在 reference 的主页上列出此类成员函数，但如果你使用搜索你会发现这些类型的东西）。

给定图片：

还有面具PNG：

您可以像这样渲染蒙版图像：

let img;
let mask;

function preload() {
  img = loadImage('https://www.paulwheeler.us/files/windows-95-desktop-background.jpg');
  mask = loadImage('https://www.paulwheeler.us/files/Vase-Illusion.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  img.mask(mask);
  
  noLoop();
}

function draw() {
  image(img, 0, 0, height * (img.width / img.height), height)
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;

【讨论】：