Javascript 个用烟雾粒子创建的字母

Question

我想使用 javascript 从烟雾动画创建标题标题。就像这里这种类型的烟雾移动来创建字母但是我如何能够在这里操纵烟雾？：http://jsfiddle.net/Ujz4P/1563/ 例如，我如何将其形成 '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();
});
}

有更简单的方法吗？

Answer 1

我认为算法可以像...

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

这就是要点，如有任何问题，请随时要求澄清。

Answer 2

有很多很棒的网站可以为标题序列生成 gif。也许您可以将 gif 嵌入 HTML.

希望对您有所帮助。

Javascript 个用烟雾粒子创建的字母

Javascript letters created out of smoke particles

javascript

effects

particles

smoke