当我给它一个常量值时，为什么 alpha 值会改变？

Question

我正在使用 p5.js 网页编辑器

        var sketch = function (p) {
          with(p) {

            p.setup = function() {
              createCanvas(400, 400);
              secCanvas = createGraphics(400, 400);
              secCanvas.clear();
              trans = 0;
              drop_size = 10;
              sun_size = 50;
              radius = 10;
            };
        
            p.draw = function() {
              background(3, 182, 252, 1);
              image(secCanvas, 0, 0)
              secCanvas.fill(255, 162, 0, 1)
              secCanvas.ellipse(width/2, 0 + sun_size, sun_size)
              fill(40, trans)
              trans = random(255);
              ellipse(random(mouseX + radius, mouseX - radius), random(mouseY + radius, mouseY - radius), drop_size)
              drop_size = random(50)
            };
            
          }
        };
        
        let node = document.createElement('div');
        window.document.getElementById('p5-container').appendChild(node);
        new p5(sketch, node);

    body {
      background-color:#efefef;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <div id="p5-container"></div>

当我在 secCanvas.fill() 中设置一个离散的 alpha 值时。该值似乎在逐渐增加（并很快停止），而我没有给出这样的指示。为什么会这样？这仅在我将 background(3, 182, 252, 1); 放入绘制函数时发生，但当我将其放入设置函数时不会发生。

Answer 1

每一帧都绘制在所有之前的帧之上，因此当您绘制 semi-transparent 背景时，您仍然可以在其下方看到之前的帧。

可以把它想象成在你已经画过的东西上加一层很薄的油漆。因为您要添加的颜色是 semi-transparent，您仍然可以看到它下面的内容。然后在下一帧中，添加另一层油漆，之前的帧会变得更加暗淡。

由于计算机根据先前的帧和新的 semi-transparent 背景颜色计算新颜色的方式，它们不再变得更暗。长话短说，您绘制的颜色几乎是 100% 透明的，因此它的强度不足以完全隐藏之前的帧。

当我给它一个常量值时，为什么 alpha 值会改变？

Why does the alpha value change when I have given it a constant value?

colors

p5.js