为什么透明背景会导致绘制对象的痕迹？

Question

    <style>
      body { margin: 0; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
    <script>
    function setup(){
        createCanvas(500,200);
        s = createSlider(0,255,12);
        s.position(10,20);
    }
    let alphaVal = 0;
    function draw(){
        alphaVal = s.value();
        background(0,alphaVal);
        fill(255);
        circle(mouseX,mouseY,20);
    }
    </script>

为什么低 alpha 值会导致拖尾？ p5 是否跟踪所有绘制的东西，因为当背景具有透明度时可以看到先前绘制的圆圈？这会影响性能吗？

Answer 1

总而言之，draw() 函数将在每一帧上调用，因此如果背景有 alpha，它会在先前绘制的帧的顶部绘制一个半透明的黑色矩形。这就是为什么我们可以看到以前的位置。

这不会影响性能，因为 p5js 就是这样构建的。它将在每一帧生成一个图像，然后在下一帧重绘它。

我希望它有意义！

为什么透明背景会导致绘制对象的痕迹？

Why transparent background cause trails of objects drawn?

javascript

p5.js