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