p5.js | blendMode()函数

简介

blendMode()是p5.js中的一个图像操作函数，它可以用来设置两个图像之间的混合模式。p5.js中默认的混合模式是BLEND，但是通过blendMode()函数可以设置其他模式，如ADD、DARKEST、LIGHTEST、SUBTRACT、DIFFERENCE等等。

语法

blendMode(mode)

• mode: 模式名称，字符串类型。

用法示例

常规混合模式

以下的例子展示了如何使用blendMode()函数将两个矩形混合起来，并使用ADD混合模式。加法混合会将两个图像的亮度相加，最终产生一个更亮的图像。

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

function draw() {
  background(220);
  
  //选证填充颜色
  fill(255, 0, 0);
  rect(50, 50, 200, 200);
  
  //选择混合模式
  blendMode(ADD);
  //选择填充颜色
  fill(0, 255, 0);
  rect(100, 100, 200, 200);
}

自定义混合模式

以下的例子展示了如何创建自己的混合模式，并使用它来混合两个图像。自定义混合模式需要使用graphics()函数创建一个缓冲区，并调用blendMode()函数设置混合模式，最后通过image()函数将缓冲区中的图像渲染在画布上。

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

function draw() {
  background(220);
  
  //创建缓冲区
  let buffer = createGraphics(width, height);
  
  //设置混合模式为LIGHTEST，并画上一个矩形
  buffer.blendMode(LIGHTEST);
  buffer.fill(255, 0, 0);
  buffer.noStroke();
  buffer.rect(50, 50, 200, 200);

  //设置混合模式为DARKEST，并画上一个圆形
  buffer.blendMode(DARKEST);
  buffer.fill(0, 0, 255);
  buffer.noStroke();
  buffer.ellipse(200, 200, 200, 200);
  
  //将缓冲区中的图像渲染到画布上
  image(buffer, 0, 0);
}

总结

blendMode()函数是p5.js中的一个图像操作函数，通过它可以轻松地设置两个图像之间的混合模式。使用blendMode()函数可以实现各种有趣的效果，如加法混合、减法混合、差异混合、亮度混合等。在实际应用中，我们可以根据具体需求选择不同的混合模式，或者创建自己的混合模式。