Javascript 如何在网页上绘制文本动画？

我想有一个网页，其中有一个中心词

我想用动画来画这个单词，这样页面就可以像我们一样“写出”单词，也就是说，它从一个点开始，随着时间的推移画出直线和曲线，这样最终的结果就是一个字形

我不在乎这是用

还是用DOM完成的，我也不在乎这是用JavaScript还是CSS完成的。不使用jQuery会很好，但不是必需的

我该怎么做？我已经找遍了，运气也不好。

---

我创建了一个javascript库，可以创建逼真的动画。它易于使用，并且需要一个充当字体的特殊JSON文件

var-vara=新的vara（#容器“，”https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
文字：“你好，世界！！”，
尺寸：48，
y:10
}, {
文字：“真实动画”，
尺码：34，
颜色：“f44336”
}], {
冲程宽度：2，
textAlign：“居中”
});
#容器{
填充：30px；
}


我想用动画画这个词，这样页面
“写”这个词的方式和我们一样

帆布版
这将绘制单字符，更像是手写。它使用长破折号模式，其中每个字符的开/关顺序随时间交换。它还有一个速度参数



动画示例（请参见下面的演示）

为了增加真实感和有机感，我添加了随机字母间距、y增量偏移、透明度、非常微妙的旋转，最后使用了已经“手写”的字体。这些可以包装为动态参数，以提供广泛的“写作风格”

为了获得更真实的外观，需要路径数据，而默认情况下并非如此。但这是一段短而有效的代码，它近似于手写行为，并且易于实现

工作原理
通过定义破折号模式，我们可以创建行进中的蚂蚁、虚线等等。通过为“关闭”点定义一个很长的点并逐渐增加“打开”点，可以利用这一点，在设置点长度动画的同时，在笔划时会产生绘制线的错觉

由于离点太长，重复图案将不可见（长度将随所用字体的大小和特征而变化）。字母的路径将有一个长度，因此我们需要确保每个点至少覆盖这个长度

对于由多个路径（f.ex.O、R、p等）组成的字母，一个用于轮廓，一个用于空心部分，线条将显示为同时绘制。我们不能用这种技术做太多的事情，因为它需要分别对每个路径段进行笔划访问

兼容性
对于不支持canvas元素的浏览器，可以在标记之间放置另一种显示文本的方式，例如样式文本：

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

仅CSS:


@关键帧fadein\u左{
从{
左：0；
}
到{
左：100%；
}
}
#开始：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0%；
不透明度：0.7；
高度：25px；
背景：#fff；
动画：fadein_左3秒；
}

一些文本一些文本一些文本一些文本一些文本一些文本
经过多次测试，下面是一些注意事项。我们的目标是在需要用户交互的DOM页面上以最少的阻塞方式显示快速文本数据

当然，有很多方法可以实现同样的目标。在这个例子中，差异可能并不明显，它确实适用于复杂的接口

最慢的：
innerHTML
和内联样式。每次迭代时都会重新计算DOM。浏览器正在努力工作以保持列车正常运行。它将很快出现故障，导致内存泄漏和冻结：


setInterval（函数（）{
out.innerHTML=`${Math.random（）*1000}`
}，1）
哇，真有意思。我采用了您的原始代码片段，并通过删除重复的CSS属性、使用基于百分比的偏移量和dasharray值对其进行了改进，更改笔划宽度以使代码的工作方式更加明显：如果您愿意，可以随意将这些改进编辑到您的答案中。对于这个问题，这是一个史诗般的解决方案，SVG优于canvas（+1）如果浏览器不支持，它将显示文本。@JefferyThaGintoki您也可以使用画布执行此操作，只需将文本放在画布标记之间，如果不支持画布，文本（或正文中其他答案显示的动画gif）将改为显示。如果浏览器不支持画布，它可能也不支持svg。我认为svg文本的使用很棒，但是我想知道，是否可以在某个时候添加填充？只是字母的轮廓在所有项目中都不好看，干杯！当然，这是+1answer@randomguy04检查第一个片段，我已对其进行编辑以添加填充效果。它是通过添加
$（this）.css（'fill'，'red'）
作为动画的回调来完成的。我考虑了如何实际“手写”角色，并在这里发表了我的想法：在a（带a）中有一些非常类似的东西，在过去，我使用动画精灵面具在Flash中制作这个动画。你需要的是给一个面具设置动画，这意味着让它逐渐显示文本。动画将由遮罩帧组成。当然，你可以将文本分解成曲线。在手动使用SVG和一些SVG编辑器（Illustrator或其他任何可以创建文本SVG的工具）之前，必须先使用这些工具。我不知道SVG是否支持掩码，但如果支持的话，这将变得更容易制作动画