p5.js 图像掩码() 方法

p5.js 库中p5.Image的mask()方法用于将给定的掩码应用于图像。这是通过使用蒙版图像的 Alpha 通道作为该图像的 Alpha 通道来完成的。

句法：

mask( srcImage )

参数：此函数接受如上所述和下文所述的单个参数。

• srcImage：它是一个 p5.Image，将用作要应用的掩码。

在实现以下示例时，以下库包含在 HTML 页面的“head”部分中。

示例：下面的示例说明了p5.js库中的mask()方法。

Javascript

function preload() {
    img_orig =
      loadImage("sample-image.png");
    img_mask =
      loadImage("image-mask.png");
}
  
function setup() {
    createCanvas(500, 500);
    textSize(20);
  
    btnBlur =
      createButton("Add a mask to the image");
    btnBlur.position(30, 420);
    btnBlur.mousePressed(applyMask);
}
  
function draw() {
    clear();
  
    text("Click on the button to add " +
         "a mask to the image", 20, 20);
    text('Image:', 20, 60);
    image(img_orig, 20, 80, 200, 100);
  
    text("Mask:", 20, 220);
    image(img_mask, 20, 220, 180, 180);
}
  
function applyMask()
{
    // Apply the given mask to the image
    img_orig.mask(img_mask);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.Image/mask