-1

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

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

4

2 回答 2

3

我认为算法可以像......

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

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

于 2017-05-23T19:25:35.397 回答
0

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

希望这可以帮助。

于 2017-05-23T20:05:33.280 回答