Question

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

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>

Answer 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()，否则透明背景会在旧场景之上绘制，这可能不是您想要的。

Answer 2

我发现的另一个选择是不调用background（）函数：

var check = false;
function setup(){
  createCanvas(500,500);
}
function draw(){

  fill(random(255),random(255),random(255));
  rect(100,100,50,90);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

是否可以在javascript（p5js）上制作透明的背景色？

2 个答案: