克服无法移动先前绘制的项目的 HTML5 canvas 限制的最佳方法是什么？
What is the best way to get past the HTML5 canvas limitation of not being able to move previously drawn items?
我正在尝试使用七个气象站的数据创建流线型风图。我正在尝试使用相同类型的地图是 animation or this animation。
我在网上阅读了介绍其工作原理的文章。引用如下。
Typically, such a visualization in the browser relies on the Canvas 2D API and roughly works like this:
- Generate an array of random particle positions on screen and draw the particles.
- For each particle, query the wind data to get the particle speed in its current location, and move it accordingly.
- Reset a small portion of particles to a random position. This makes sure that areas the wind blows away from never become fully empty.
- Fade the current screen a bit and draw newly positioned particles on top.
我正在努力实现这一目标，但我不明白动画是如何实现以下功能的...
- 移动 canvas 上的点（因为您不能移动之前绘制的项目。）
- 调整了之前绘制的点的不透明度，使它们消失。
那么，他们是怎么做到的？非常感谢这位新手程序员的任何建议。
谢谢。
经过大量广泛的研究，我找到了一种方法来实现我正在寻找的东西。
- 因为我正在创建一条尾巴会消失的线，所以我能够使用此代码。
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();
这会在 canvas 上绘制一个不透明层并允许缩短线条。
- 关于点，因为我在画一条线，所以我可以用图像中的像素替换点。
我正在尝试使用七个气象站的数据创建流线型风图。我正在尝试使用相同类型的地图是 animation or this animation。
我在网上阅读了介绍其工作原理的文章。引用如下。
Typically, such a visualization in the browser relies on the Canvas 2D API and roughly works like this:
- Generate an array of random particle positions on screen and draw the particles.
- For each particle, query the wind data to get the particle speed in its current location, and move it accordingly.
- Reset a small portion of particles to a random position. This makes sure that areas the wind blows away from never become fully empty.
- Fade the current screen a bit and draw newly positioned particles on top.
我正在努力实现这一目标，但我不明白动画是如何实现以下功能的...
- 移动 canvas 上的点（因为您不能移动之前绘制的项目。）
- 调整了之前绘制的点的不透明度，使它们消失。
那么，他们是怎么做到的？非常感谢这位新手程序员的任何建议。
谢谢。
经过大量广泛的研究，我找到了一种方法来实现我正在寻找的东西。
- 因为我正在创建一条尾巴会消失的线，所以我能够使用此代码。
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();
这会在 canvas 上绘制一个不透明层并允许缩短线条。
- 关于点，因为我在画一条线，所以我可以用图像中的像素替换点。