克服 HTML5 canvas 無法移動先前繪制的項目的限制的最佳方法是什么？

Question

我正在嘗試使用來自七個氣象站的數據創建流線型風 map。 我正在嘗試使用相同類型的 map 是這個animation還是這個animation 。

我在網上讀過文章，說它是如何工作的。 下面引用它。

通常，瀏覽器中的這種可視化依賴於 Canvas 2D API，大致如下：

1. 在屏幕上生成一組隨機粒子位置並繪制粒子。
2. 對於每個粒子，查詢風數據以獲取粒子在其當前位置的速度，並進行相應的移動。
3. 將一小部分粒子重置為隨機 position。 這樣可以確保風吹走的區域永遠不會完全變空。
4. 稍微淡化當前屏幕並在頂部繪制新定位的粒子。

資源

我正在努力實現這一目標，但我不明白動畫是如何做到以下...

1. 在 canvas 上移動了點（因為您無法移動以前繪制的項目。）
2. 調整了之前繪制的點的不透明度，使它們消失。

那么，他們是怎么做到的呢？ 非常感謝這位新手程序員的任何建議。

謝謝你。

Answer 1

經過大量廣泛的研究，我找到了一種方法來實現我正在尋找的東西。

1. 因為我正在創建一條尾巴會消失的線，所以我能夠使用此代碼。

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

這會在 canvas 上繪制一個不透明層，並允許縮短線。

2. 關於點，因為我正在畫一條線，所以我可以用圖像中的像素替換點。