p5.js | tint()函数

在p5.js中，tint()函数被用于为图像应用色彩过滤器。 这意味着可以通过tint()函数更改图像的颜色，使其看起来像是通过透明的颜色膜过滤过的一样。

语法

tint(gray)
tint(gray, alpha)
tint(v1, v2, v3)
tint(v1, v2, v3, alpha)

• gray：可以是0到255之间的任何数字，它指的是应用于所有颜色通道(红、绿、蓝)的灰度值。
• alpha：透明度，范围从0(透明)到255(不透明)。 如果未提供alpha值，则默认为255。
• v1、v2和v3：三个参数是每个颜色通道的值，范围从0到255。 如果只提供一个值，则使用它应用于所有颜色通道。 如果两个值提供，则用于red和green通道。 如果三个值都提供，它们分别用于red、green和blue通道。

示例

应用灰度过滤器

let img;

function preload() {
  img = loadImage('myImage.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
  tint(128);
  image(img, 0, 0);
}

这个例子演示了如何应用一个中间值的灰度过滤器。 在这种情况下，图像被调整为半透明的灰色色调。

应用自定义颜色过滤器

let img;

function preload() {
  img = loadImage('myImage.png');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
  tint(0, 255, 0, 200);
  image(img, 0, 0);
}

这个例子演示了如何将一个自定义颜色过滤器应用于图像。 在这种情况下，图像被调整为部分透明的绿色色调。

注意事项

• 如果在应用tint()函数之前使用了noTint()函数，则不会应用任何颜色过滤器。
• 如果应用了tint()函数，它将被应用到所有在函数之后创建的图像上，直到模式被更改或noTint()被调用。