由烟雾粒子创建的 Javascript 字母答案

【问题标题】：Javascript letters created out of smoke particles由烟雾粒子创建的 Javascript 字母
【发布时间】：2017-05-23 19:13:07
【问题描述】：

我想使用 javascript 从烟雾动画创建我的标题。就像这里这种类型的烟雾移动来创建字母但我如何能够在这里操纵烟雾？：http://jsfiddle.net/Ujz4P/1563/ 例如，我如何使其形成“约翰”

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();
});
}

有没有更简单的方法来做到这一点？

【问题讨论】：

如果你有创意，你应该可以用纯 CSS3 来做。我想你可以扭转这样的事情：zachstronaut.com/lab/smoke.html
虽然看起来像是典型的淡出，但那不是烟雾
@john 你用的是什么浏览器？肯定有通过阴影、动画和褪色实现的烟雾效果。
谷歌浏览器哈哈
当你问“有没有简单的方法来做到这一点？”简短的回答是“不，您的示例代码已经太简单了。”缺少用于编写粒子文本的现成库，您将需要编写更多代码。我为你提出了一个算法。也许对你来说最困难的部分是零。

标签： javascript effects particles smoke

【解决方案1】：

我认为算法可以像...

获取文本的矢量表示。搜索一个库来执行此操作，例如 Google“js 字体到矢量路径”。
您最终会得到一组代表您的文本的向量。进一步分割向量，使得沿线有点。例如。大写字母“L”可能首先用 2 个向量表示它的 2 个边，但您希望对向量进行分段，以便每边可以有多个点。
第 1 步和第 2 步生成的所有点都是烟雾粒子的目标坐标。换句话说，如果你的烟雾粒子是在这些目标坐标处绘制的，它们就会拼出你想要的文字。
为烟雾粒子分配随机坐标。
在每次渲染时，使用补间将烟雾粒子移动到更靠近其指定目标坐标的位置。（您也可以使用 CSS 转换来完成此操作）。为了获得更自然的外观，您可以在粒子运动中添加一些随机游荡，以便它们最终到达目的地坐标而无需直线。

这是要点，请随时要求澄清任何事情。

【讨论】：

这基本上是你能得到的最好的建议，OP。没有人为您编写数百行代码，这些都是很好的实现目标。
开始的有趣想法谢谢。我还发现了一种叫做 Autodesk Smoke 的东西，它更容易。无论如何，我一直想用 javascript 做一些事情，这很有帮助，感谢它！

【解决方案2】：

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

希望这会有所帮助。

【讨论】：