用烟雾颗粒创建的Javascript字母

Question

我想使用javascript从烟雾动画创建我的标题标题。就像在这里这种类型的烟雾移动创造字母，但我怎么能在这里操纵烟雾？：http://jsfiddle.net/Ujz4P/1563/ 例如，我如何将其形成为＆＃39; john＆＃39;

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. 获取文本的矢量表示。搜索lib来执行此操作，例如Google“js font to vector path”。
2. 您最终会得到一组代表您文字的向量。进一步分割矢量，使得沿着线有点。例如。大写“L”可能首先描绘其两侧只有2个向量，但是你想要对向量进行分段，这样每一方都可以有多个点。
3. 步骤1和2生成的所有点都是烟雾粒子的目标坐标。换句话说，如果您的烟雾粒子是在这些目标坐标处绘制的，它们会拼出您想要的文本。
4. 将随机坐标分配给烟雾颗粒。
5. 在每个渲染上，使用补间将烟雾粒子移近其指定的目标坐标。 （您也可以使用CSS转换完成此操作）。为了更自然的外观，你可以在粒子运动中添加一些随机游荡，这样它们最终可以在没有连接的情况下到达目标坐标。

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

Answer 2

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

希望这有帮助。