用 canvas 做路径填充动画的问题

[davin]

比如这个 swf ： xiexingcun.com/hanzi/ShowArticle.asp?ArticleID=3894

按照文字的笔顺依次填充完整个字，但是填充的时候都是横平竖直。在 canvas 动画中，有没有办法在填充的时添加一些变化，就像是用毛笔在写字的那种，而不是死板的横平竖直就填充完。

有点像这个： xici.net/d161809338.htm

[shui14]

这场景显然 svg 啊 canvas 的话要复杂不少 极客上面有个绘字的教程通俗易懂

[vm]

其实就是按照笔画方向填充个矩形，然后根据字的轮廓的 path 来 clip 。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

[davin]

多谢各位指点，现在有点眉目了。

[xiaolongmou]

推荐你研究一下 SVG 的图片内置动画，很有趣，根据 boder 的虚线移动，就可以实现您要的写字效果，而且不需要任何 js 代码。

思路是这样的：你可以用 svg 的一个路径来描绘一个笔画，用虚线来写，但是呢，这个虚线和实线的间隔长度都等于这个笔画的长度，你让虚线移动这个笔画的长度，就可以实现写字的动画了。

[xiaolongmou]

如果您要用遮罩写字，下面移动一个长方体，来实现效果，那你也可以使用 paper.js 或者 dynamic.js 等 lib 来做一些动画，会比较简单

[davin]

@xiaolongmou 看了下两者，效果确实挺赞！多谢！