I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would
(我希望用动画绘制这个单词，这样页面就会以与我们相同的方式“写出”单词)
Canvas version(画布版)
This will draw single chars more like one would write by hand.
(这将绘制单个字符更像是手工编写的字符。)
It uses a long dash-pattern where the on/off order is swapped over time per char.(它使用长划线图案，其中每个字符随时间交换开/关顺序。)
It also has a speed parameter.(它还有一个速度参数。)
Example animation (see demo below)
(示例动画（见下面的演示）)
To increase realism and the organic feel, I added random letter-spacing, an y delta offset, transparency, a very subtle rotation and finally using an already "handwritten" font.
(为了增加真实感和有机感，我添加了随机字母间距，y delta偏移，透明度，非常微妙的旋转，最后使用已经“手写”的字体。)
These can be wrapped up as dynamic parameters to provide a broad range of "writing styles".(这些可以作为动态参数包装，以提供广泛的“书写风格”。)
For a even more realistic look the path data would be required which it isn't by default.
(为了更逼真的外观，将需要路径数据，而不是默认情况下。)
But this is a short and efficient piece of code which approximates hand-written behavior, and easy to implement.(但这是一段简短而有效的代码，它近似于手写行为，并且易于实现。)
How it works(这个怎么运作)
By defining a dash pattern we can create marching ants, dotted lines and so forth.
(通过定义破折号模式，我们可以创建行进蚂蚁，虚线等。)
Taking advantage of this by defining a very long dot for the "off" dot and gradually increase the "on" dot, it will give the illusion of drawing the line on when stroked while animating the dot length.(利用这一点，通过为“关闭”点定义一个非常长的点并逐渐增加“开”点，它将给出在绘制点长度时描边时画线的错觉。)
Since the off dot is so long the repeating pattern won't be visible (the length will vary with the size and characteristics of the typeface being used).
(由于关闭点太长，重复图案将不可见（长度将随着所使用的字体的大小和特性而变化）。)
The path of the letter will have a length so we need to make sure we are having each dot at least covering this length.(字母的路径将有一个长度，所以我们需要确保我们每个点至少覆盖这个长度。)
For letters that consists of more than one path (f.ex. O, R, P etc.) as one is for the outline, one is for the hollow part, the lines will appear to be drawn simultaneously.
(对于由多个路径（f.ex.O，R，P等）组成的字母，其中一个用于轮廓，一个用于空心部分，这些线条似乎是同时绘制的。)
We can't do much about that with this technique as it would require access to each path segment to be stroked separately.(我们不能用这种技术做很多事情，因为它需要访问每个路径段来分别进行描述。)
Compatibility(兼容性)
For browsers that don't support the canvas element an alternative way to show the text can be placed between the tags, for example a styled text:
(对于不支持canvas元素的浏览器，可以在标记之间放置显示文本的替代方法，例如样式化文本：)
<canvas ...>
<div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>
Demo(演示)
This produces the live animated stroke-on ( no dependencies ) -
(这会产生实时动画描边（ 无依赖关系 ） -)
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>
