由烟雾粒子创建的Javascript字母

Question

我想使用 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();
});
}

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

Answer 1

我认为算法可以像...

1. 获取文本的矢量表示形式。搜索一个库来做到这一点，例如谷歌"js字体到矢量路径"。
2. 您最终会得到一个表示文本的向量集合。进一步分割向量，以便沿线有点。例如，大写字母"L"可能首先用 2 个向量表示其 2 个边，但您希望分割向量，以便每条边可以有多个点。
3. 步骤 1 和 2 生成的所有点都是烟雾粒子的目的地坐标。换句话说，如果你的烟雾粒子是在这些目的地坐标上绘制的，它们会拼出你想要的文本。
4. 为烟雾粒子分配随机坐标。
5. 在每个渲染上，使用补间将烟雾粒子移近其分配的目标坐标。(您也可以使用 CSS 转换来实现此目的)。为了获得更自然的外观，您可以向粒子移动添加一些随机漂移，以便它们最终到达目的地坐标而不会蜂拥
而至。

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

Answer 2

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

希望这有帮助。