在畫布上慢慢淡出圖像

-1

我用Draw Worm做了一些修改，結果是this，但是我有個問題需要解決。我想讓那些曾經在那裏待過很長時間的線條慢慢消失在黑暗中。我做了這個代碼：在畫布上慢慢淡出圖像

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

的問題是，該行正在消失得太快，而不是我想拿逐步淡出，或者更慢。

來源

2016-10-05 Ovidiu Bar

您無法擦除已經在畫布上繪製的線條。但是，如果已經存儲了繪製線的位置，則可以在兩個指定的座標上清除畫布區域。 – choz

這應該很容易。問題是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/

來源

2016-10-05 09:54:55

非常感謝，它是，它是非常簡單的你:)））。還有一個問題，當我加載頁面而不是一個自繪線有多行時，有什麼辦法？謝謝。 –

@OvidiuOvi我不明白你的第二個問題。但如果你有更多的問題，你應該使用「問問題」按鈕發佈。評論不應該用於提出問題，而是要求澄清或指出錯誤。 –

對不起，我不知道這個規則。感謝您的幫助，它也非常漂亮，快速動畫也是如此。另外我添加了requestAnimationFrame函數而不是seTimeout。我的問題是關於相同的代碼，並且如果無論如何要在動畫的開始處獲得，而不是在底部頁面上繪製自己的一行，而在不同位置繪製多行。謝謝！ –

在畫布上慢慢淡出圖像

回答

相關問題