javascript p5 库中是否有不透明度设置？答案

【问题标题】：Is there an opacity setting in javascript's p5 library?javascript p5 库中是否有不透明度设置？
【发布时间】：2021-07-17 11:48:26
【问题描述】：

我正在使用 p5 库，所以像 fill() rect() ellipse() 这样的函数，但是有没有办法改变形状的不透明度，所以即使我 fill() 我仍然可以看到它背后的形状?

【问题讨论】：

标签： javascript colors opacity p5.js

【解决方案1】：

你要做的就是给形状一个透明的颜色，这样你就可以看到形状的背后。

 background(220);
//   The color of the first Shape
// The first parameter is the redness, the second is the greenness, the third is the blueness, and the fourth parameter is called "Alpha" which determines the transparency
  fill(255,0,0,50);
//   The first Shape
  circle(200,200,200);
//   The color of the second Shape
  fill(0,255,0,50);
//   The second shape
  circle(200,200,150)

如果您只想查看形状的轮廓，您可以在绘制较大的形状后在画布上简单地绘制较小的形状。尽管如此，我还是推荐阅读这篇article。

【讨论】：

【解决方案2】：

我不确定您是否正在创建颜色变量，但使用 setAlpha 可以帮助仅根据需要调整 alpha 值。如果您只需要在设置颜色时设置 alpha，Rabbid76 的答案就可以了。

以下是从setAlpha 参考页面借用的示例。

var squareColor;
function setup() {
  createCanvas(400, 400);
  // assign our color variable to change the alpha later
  squareColor = color(100, 50, 100);
}

function draw() {
  clear();
  background(200);
  // In the default RGB mode the transparency (alpha) value range is between 0 and 255
  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  fill(squareColor);
  rect(20, 20, 60, 60);
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

您需要用透明颜色填充形状。 fill() 颜色可以通过多种不同的方式指定。例如 3 个颜色通道（红、绿、蓝）和 alpha 通道。

例如：红色 50% 透明度

fill(255, 0, 0, 127);

有关所有不同选项，请参阅 fill 文档。

【讨论】：