由烟雾粒子创建的Javascript字母

我想让我的标题标题从烟雾动画使用javascript创建。就像这里这种烟雾移动来创造字母，但是我怎么能在这里操纵烟雾呢 例如，我如何将它变成“john”

function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,400,400);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
    particle.draw();
});
}

---

有更简单的方法吗？

我认为算法可以像

获取文本的向量表示。搜索一个库来实现这一点，例如谷歌“js字体到矢量路径”

最终将得到一组表示文本的向量。进一步分割向量，以便沿直线有点。例如，大写字母“L”可能首先用2个向量表示其两侧，但您希望分割向量，以便每一侧可以有多个点

步骤1和步骤2生成的所有点都是烟雾粒子的目标坐标。换句话说，如果您的烟雾粒子是在这些目标坐标处绘制的，它们将拼出您想要的文本

将随机坐标指定给烟雾粒子

在每个渲染上，使用tweening将烟雾粒子移动到其指定的目标坐标附近。（您也可以通过CSS转换来实现这一点）。为了获得更自然的外观，您可以在粒子运动中添加一些随机游荡，以便它们最终到达目的地坐标，而无需直线移动

---

这就是要点，你可以要求澄清任何事情。

有很多很棒的网站可以为标题序列生成GIF。也许你可以在HTML中嵌入gif

---

希望这能有所帮助。

如果你有创意，你应该能够用纯CSS3来完成。我想你可以改变这种情况：那不是烟，尽管看起来像是典型的褪色out@john你用的是什么浏览器？当你问“有没有简单的方法可以做到这一点？”时，简短的回答是“没有，你的示例代码已经太简单了。”如果没有现成的库来编写粒子文本，你将需要编写更多的代码。我为你提出了一个算法。也许专注于你的困难部分。这基本上是你能得到的最好的建议，OP。除了有人为你写几百行代码之外，这些都是很好的实现目标。有趣的想法开始谢谢你。我还发现了一种叫做autodesk smoke的东西，它更简单。不管怎样，我一直想用javascript做一些事情，这非常有帮助，非常感谢！！