比如这个 swf ： xiexingcun.com/hanzi/ShowArticle.asp?ArticleID=3894
按照文字的笔顺依次填充完整个字，但是填充的时候都是横平竖直。在 canvas 动画中，有没有办法在填充的时添加一些变化，就像是用毛笔在写字的那种，而不是死板的横平竖直就填充完。
有点像这个： xici.net/d161809338.htm
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 3855 days ago, the information mentioned may be changed or developed.
 |
1
这场景显然 svg 啊 canvas 的话要复杂不少 极客上面有个绘字的教程通俗易懂
|
1 |
2
其实就是按照笔画方向填充个矩形，然后根据字的轮廓的 path 来 clip 。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
|
 |
3
多谢各位指点，现在有点眉目了。
|
 |
xiaolongmouMay 11, 2016
4
推荐你研究一下 SVG 的图片内置动画，很有趣，根据 boder 的虚线移动，就可以实现您要的写字效果，而且不需要任何 js 代码。
思路是这样的：你可以用 svg 的一个路径来描绘一个笔画，用虚线来写，但是呢，这个虚线和实线的间隔长度都等于这个笔画的长度，你让虚线移动这个笔画的长度，就可以实现写字的动画了。 |
|
5
如果您要用遮罩写字，下面移动一个长方体，来实现效果，那你也可以使用 paper.js 或者 dynamic.js 等 lib 来做一些动画，会比较简单
|
|
6
@xiaolongmou 看了下两者，效果确实挺赞！多谢！
|
Select Language