Javascript Canvas fillRect 透明黑色

Question

我正在使用 JavaScript 开发一个资源监视器，并假装用一个很酷的背景动画来完成它。

我在 fillStyle 中使用 fillRect 和透明颜色时遇到问题，例如:

        function draw() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, c.width, c.height);
            ctx.fillStyle = "#00FF00";
            ctx.strokeStyle = "#00FF00";
            ctx.beginPath();
            ctx.arc(getRandom(0, c.width),getRandom(0,c.height),25,0,2*Math.PI);
            ctx.arc(getRandom(0, c.width),getRandom(0,c.height),25,0,2*Math.PI);
            ctx.stroke();
        }

效果很好，但没有完全填满，在之前已经经过的圆圈处留下了一些“鬼影”。

有办法解决这个问题并使背景再次纯黑吗？

注意事项:我无法画纯黑色，因为我希望画出的线条平滑消失

问题图片:/image/GrPxX.png请注意，黄点是最近的线，橙色是过渡线，可提供平滑的效果，红点是“重影”

Answer 1

当您填充矩形时，您使用的是半透明的黑色。这样做的作用是使那里的东西变暗，但不会消除它，因为它是半透明的。如果您想用纯黑色覆盖它，请设置完全不透明度(最大 alpha 值)，或者使用 rgb 颜色而不是 rgba。如果您使用 rgb，alpha 值将隐式设置为不透明。