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

Question

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

Answer 1

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

例如：红色50%透明度

fill(255, 0, 0, 127);

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

Answer 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);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>

Answer 3

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

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)

如果你的要求只是看到形状的轮廓，你可以在画出较大的形状后，简单地在画布上画出较小的形状。尽管如此，我还是建议阅读这篇文章。