キャンバスでゆっくりと画像を消していく

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(); 

私も​​代わりのsetTimeoutを使用することをお勧めします。私はあなたのコードを試して、速いアニメーションでどれぐらい良いか見てみましょう：https://jsfiddle.net/Darker/mwj60hq4/