为什么画布轨迹不会完全淡出？

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.grindingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html

然而，所有这些似乎都留下了稍微淡出的“踪迹”，以至于踪迹永远不会真正消失。我知道有其他方法可以创建路径，但我的主要问题是：

为什么痕迹没有完全消失？为什么添加额外的多层褪色颜色会构成完整的颜色？

Answer 1

您可以尝试在每帧创建轨迹的后面稍后填充一个矩形，只需将颜色设置为画布的背景颜色即可。当路径达到一定长度后，这应该会覆盖路径。