帆布小徑葉子…小徑

Question

在Canvas中進行動畫制作時，進行跟蹤的一種常見方法是用半透明的顏色或漸變覆蓋整個上下文。 像這樣：

context.fillStyle = 'rgba(255, 255, 255, .05)';
context.fillRect(0, 0, canvas.width, canvas.height);

// ...draw your next frame

關於如何創建路徑的許多示例都使用這種方法（我沒有編寫任何這些示例）：

• http://codepen.io/gbnikolov/pen/VLLgRW
• http://www.html5gamedevs.com/topic/13621-best-way-to-create-fading-trails/
• http://www.growingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html

但是，所有這些似乎都留下了“足跡”的稍微消失的蹤跡 ，因此蹤跡從未真正消失。 我知道還有其他創建跟蹤的方法 ，但是我的主要問題是：

為什么足跡沒有完全消失？ 為什么添加更多的褪色顏色多層會完全構成該顏色？

謝謝您幫助我困惑的大腦。

Answer 1

您可以嘗試在每幀創建軌跡的內容后面填充一個矩形，只需將顏色設置為畫布的背景顏色即可。 到達一定長度后，這應該掩蓋了蹤跡。