慢慢淡出画布上的图像

Question

我使用了Draw Worm并进行了一些更改，结果是这样，但我有一个问题需要解决。 我想让那些存在已久的线条慢慢消失在黑暗中。 我做了这个代码：

function fadeOut() {
    context.fillStyle = "rgba(0, 0, 0, 1)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut,10000);
}
fadeOut();

问题是线条消失得太快了，相反，我想要逐渐淡出，或更慢。

Answer 1

那应该很容易。 问题是rgba(0, 0, 0, 1)表示完全不透明的黑色。 您可能想尝试一些半透明的颜色。 例如：

function fadeOut() {
    context.fillStyle = "rgba(0, 0, 0, 0.05)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut,1000);
}
fadeOut();

我还建议使用requestAnimationFrame而不是setTimeout 。 我对你的代码做了一个小提琴，看看它的快速动画有多好： https : //jsfiddle.net/Darker/mwj60hq4/