javascript - Canvas 小径叶子......小径

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

然而，所有这些似乎都留下了slightly faded out trail of the "trail" ，这样轨迹就不会真正消失。我知道 there's alternative ways to create trails ，但我的主要问题是:

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

谢谢你帮我解开迷茫的大脑。

Answer 1

您可以尝试在每帧创建轨迹的任何部分后面填充一个矩形，只需将颜色设置为 Canvas 的背景颜色即可。这应该在达到一定长度后覆盖小径。