我想要一个网页，其中有一个居中的单词。
我希望用动画绘制这个单词，以便页面以与我们相同的方式“写”出该单词，即它从一个点开始，随着时间的推移绘制直线和曲线，以便最终结果是一个字形。
我不在乎这是否完成<canvas>或者 DOM，我不在乎它是用 JavaScript 还是 CSS 完成的。没有 jQuery 会很好，但不是必需的。
我怎样才能做到这一点？我搜索过详尽的没有运气。
我想要用动画来绘制这个单词，这样页面 以与我们相同的方式“写”出这个词
这将更像手写一样绘制单个字符。它使用长破折号模式，其中每个字符的开/关顺序随着时间的推移而交换。它还具有速度参数。
Example animation (see demo below)
为了增加真实感和有机感，我添加了随机字母间距、y 增量偏移、透明度、非常微妙的旋转，最后使用了已经“手写”的字体。这些可以被包装为动态参数以提供广泛的“书写风格”。
为了获得更真实的外观，将需要路径数据，但默认情况下并非如此。但这是一段简短而高效的代码，近似于手写行为，并且易于实现。
通过定义虚线图案，我们可以创建行进的蚂蚁、虚线等。利用这一点，通过为“关闭”点定义一个很长的点并逐渐增加“打开”点，在动画点长度的同时，会产生在抚摸时绘制线条的错觉。
由于偏离点太长，重复图案将不可见（长度将根据所使用字体的大小和特征而变化）。字母的路径有一定的长度，因此我们需要确保每个点至少覆盖这个长度。
对于由多个路径（例如 O、R、P 等）组成的字母，如一条用于轮廓，一条用于空心部分，线条将看起来是同时绘制的。我们对此技术无能为力，因为它需要访问每个路径段以分别进行描边。
对于不支持 canvas 元素的浏览器，可以在标签之间放置显示文本的替代方法，例如样式文本：
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
这会产生实时动画描边（没有依赖关系) -
var ctx = document.querySelector("canvas").getContext("2d"),
dashLen = 220, dashOffset = dashLen, speed = 5,
txt = "STROKE-ON CANVAS", x = 30, i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
dashOffset -= speed; // reduce dash length
ctx.strokeText(txt[i], x, 90); // stroke letter
if (dashOffset > 0) requestAnimationFrame(loop); // animate
else {
ctx.fillText(txt[i], x, 90); // fill final letter
dashOffset = dashLen; // prep next char
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
ctx.rotate(Math.random() * 0.005); // random rotation
if (i < txt.length) requestAnimationFrame(loop);
}
})();canvas {background:url(http://i.imgur.com/5RIXWIE.png)}<canvas width=630></canvas>