Javascript 要克服HTML5画布无法移动先前绘制的项目的限制，最好的方法是什么？

我正在尝试使用七个气象站的数据创建一个流线型风图。我正在尝试使用相同类型的地图，是这个还是这个

我在网上读过一些文章，说它是如何工作的。下面引用它

通常，浏览器中的这种可视化依赖于画布2D API，大致如下所示：

在屏幕上生成一组随机粒子位置并绘制粒子

对于每个粒子，查询风数据以获取其当前位置的粒子速度，并相应地移动它

将一小部分粒子重置为随机位置。这样可以确保风吹走的区域永远不会完全变空

稍微淡入当前屏幕，并在顶部绘制新定位的粒子

我正试图实现这一点，但我不明白动画是如何做到以下几点的

在画布上移动点（因为无法移动以前绘制的项目。）

调整以前绘制的点的不透明度，使其消失

那么，他们是怎么做到的？对于这个新手程序员，任何建议都非常感谢

---

谢谢。

经过大量的研究，我找到了一种方法来实现我想要的目标

因为我正在创建一行，它的尾部会消失，所以我能够使用这段代码

这将在画布上绘制一个不透明层，并允许线条缩短

关于点，因为我在画一条线，我可以用图像中的像素替换点

搜索“运动模糊”：

ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();