我想做一些能給我的網站增加一些創意的東西，在看到另一個開發人員在他們的網站上實現類似的東西後，我想我會試一試。我的第一次嘗試要簡單得多，只是從最後一個點到新點畫一條線，然後淡出整個畫布。在這裡查看版本1。
然而，這個方法有一些問題，而且非常不靈活，所以我最終著手製作一個更好的版本，跟蹤所有活動點並單獨對其進行動畫處理。也許有點複雜，但手工操作可以進行更多的定製，而不會顯著降低性能。
新版本的工作原理是跟蹤數組中的所有可見點，並在每個（requestAnimation）幀上更新所有可見點：
每個點的顏色和寬度都不同，具體取決於它的生存時間，直到達到設置的最大生存期並死亡（從隊列中刪除）。這使得痕跡在消失前「淡出」成不同的顏色。在我的例子中，我的觀點是從紫色到藍色，因為它符合我的網站主題：
我的另一個擔心是行動裝置；不管出於什麼原因，一些行動裝置似乎在觸摸/拖動時發出滑鼠移動事件，這導致移動用戶出現奇怪的、跳動的光標軌跡。由於智慧型手機在任何情況下（通常）都沒有光標，所以我決定，如果用戶在啟動之前沒有附加指針設備，在啟動之前通過檢查matchMedia條件來禁用動畫：
（令人驚訝的是，它有98.12%的支持率，我以前怎麼沒有聽說過呢） 不管怎樣，把所有這些放到一個組件中，你會得到一個漂亮的滑鼠軌跡動畫！完整代碼如下：
謝謝你的閱讀，希望你覺得這有用！