我想有一个网页，其中有一个中心词
我想用动画来画这个单词，这样页面就可以像我们一样“写出”单词，也就是说，它从一个点开始，随着时间的推移画出直线和曲线，这样最终的结果就是一个字形
我不在乎是否使用<；帆布>或DOM，我不在乎它是用JavaScript还是CSS完成的。不使用jQuery会很好，但不是必需的
我该怎么做？我已经穷尽了所有的搜索，没有运气
我想用动画画这个词，这样页面
“写”这个词的方式和我们一样
帆布版
这将绘制单字符，更像是手写。它使用长破折号模式，其中每个字符的开/关顺序随时间交换。它还有一个速度参数
示例动画（请参见下面的演示）
为了增加真实感和有机感，我添加了随机字母间距、y增量偏移、透明度、非常微妙的旋转，最后使用了已经“手写”的字体。这些可以包装为动态参数，以提供广泛的“写作风格”
为了获得更真实的外观，需要路径数据，而默认情况下并非如此。但这是一段短而有效的代码，它近似于手写行为，并且易于实现
工作原理
通过定义破折号模式，我们可以创建行进中的蚂蚁、虚线等等。通过为“关闭”点定义一个很长的点并逐渐增加“打开”点，可以利用这一点，在设置点长度动画的同时，在笔划时会产生绘制线的错觉
由于离点太长，重复图案将不可见（长度将随所用字体的大小和特征而变化）。字母的路径将有一个长度，因此我们需要确保每个点至少覆盖这个长度
对于由多个路径（f.ex.O、R、p等）组成的字母，一个用于轮廓，一个用于空心部分，线条将显示为同时绘制。我们不能用这种技术做太多的事情，因为它需要分别对每个路径段进行笔划访问
相容性
对于不支持canvas元素的浏览器，可以在标记之间放置另一种显示文本的方式，例如样式文本：
<；画布…>；
<；div class=“txtStyle”>；画布上的笔划</部门>；
</帆布>；
演示
这将在上生成实时动画笔划（无依赖项）-
var ctx=document.querySelector（“canvas”）.getContext（“2d”），
dashLen=220，dashOffset=dashLen，速度=5，
txt=“画布上的笔划”，x=30，i=0；
ctx.font=“50px漫画无MS，草书，TSCu_漫画，无衬线”；
ctx.lineWidth=5；ctx.lineJoin=“圆形”；ctx.globalAlpha=2/3；
ctx.strokeStyle=ctx.fillStyle=“#1f2f90”；
（函数循环（）{
ctx.clearRect（x，0，60，150）；
ctx.setLineDash（[dashLen-dashOffset，dashOffset-speed]）；//创建长划线掩码
dashOffset-=速度；//缩短划线长度
strokeText（txt[i]，x，90）；//笔划字母
if（dashOffset>；0）requestAnimationFrame（循环）；//动画
否则{
fillText（txt[i]，x，90）；//填写最后一个字母
dashOffset=dashLen；//准备下一个字符
x+=ctx.measureText（txt[i++]）.width+ctx.lineWidth*Math.random（）；
ctx.setTransform（1,0,0,1,0,3*Math.random（））；//随机y-delta
ctx.rotate（Math.random（）*0.005）；//随机旋转
if（i<；txt.length）请求动画帧（循环）；
}
})();canvas{background:url(http://i.imgur.com/5RIXWIE.png)}<；帆布宽度=630></帆布>