我想做一些能给我的网站增加一些创意的东西，在看到另一个开发人员在他们的网站上实现类似的东西后，我想我会试一试。我的第一次尝试要简单得多，只是从最后一个点到新点画一条线，然后淡出整个画布。在这里查看版本1。

然而，这个方法有一些问题，而且非常不灵活，所以我最终着手制作一个更好的版本，跟踪所有活动点并单独对其进行动画处理。也许有点复杂，但手工操作可以进行更多的定制，而不会显著降低性能。

新版本的工作原理是跟踪数组中的所有可见点，并在每个（requestAnimation）帧上更新所有可见点：

每个点的颜色和宽度都不同，具体取决于它的生存时间，直到达到设置的最大生存期并死亡（从队列中删除）。这使得痕迹在消失前“淡出”成不同的颜色。在我的例子中，我的观点是从紫色到蓝色，因为它符合我的网站主题：

我的另一个担心是移动设备；不管出于什么原因，一些移动设备似乎在触摸/拖动时发出鼠标移动事件，这导致移动用户出现奇怪的、跳动的光标轨迹。由于智能手机在任何情况下（通常）都没有光标，所以我决定，如果用户在启动之前没有附加指针设备，在启动之前通过检查matchMedia条件来禁用动画：

（令人惊讶的是，它有98.12%的支持率，我以前怎么没有听说过呢） 不管怎样，把所有这些放到一个组件中，你会得到一个漂亮的鼠标轨迹动画！完整代码如下：

谢谢你的阅读，希望你觉得这有用！