Question

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

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/

慢慢淡出画布上的图像

1 个答案: