是否可以在 javascript (p5js) 上制作透明背景颜色？答案

【问题标题】：Is it possible to make a transparent background color on javascript (p5js)?是否可以在 javascript (p5js) 上制作透明背景颜色？
【发布时间】：2021-12-24 18:22:46
【问题描述】：

您好，我想知道是否可以使画布的背景看起来透明（无颜色）。下面的代码 sn-p 显示了我试图解释的示例。如果您有任何建议，请告诉我

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

function draw() {
  /* How to make a transparent color????? */
  background(220);
  rect(100,100,100,200);
}

html, body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

【问题讨论】：

It's right there in the documentation.
如文档中所述，您可以使用 rgba 指定透明背景： background('rgba(123, 123, 123, 0.5)')
remove background(220); 它不会绘制任何背景，这将使画布透明。
不添加背景似乎是一个解决方案..感谢@Durga

标签： javascript css canvas transparent p5.js

【解决方案1】：

这完全取决于您所说的透明是什么意思。

如果您希望它完全透明，那么您可能正在寻找clear() 函数。更多信息可以在 the reference 中找到，但总而言之：clear() 函数的作用类似于 background() 函数，但使所有内容都透明而不是任何特定颜色。

如果您希望背景部分透明，例如您仍然可以看到的颜色，那么您还需要在调用 background() 函数时添加一个 alpha 参数。同样，可以在the reference 中找到更多信息，但这里有一个示例：

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

function draw() {
  clear();
  background(220, 10);
  rect(100, 100, 100, 200);
}

请注意，您仍然需要调用clear()，否则透明背景会绘制在旧场景之上，这可能不是您想要的。

【讨论】：

【解决方案2】：

我发现的另一个选项是不调用 background() 函数：

var check = false;
function setup(){
  createCanvas(500,500);
}
function draw(){

  fill(random(255),random(255),random(255));
  rect(100,100,50,90);
  
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

这取决于你对透明的含义。

如果您希望在动画中像显示轨迹一样透明，请添加 alpha。下/

background(0, 50);

“50”数字是字母。 '0' 数字是黑色的。

【讨论】：