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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3142 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

填充

横平竖

canvas

笔顺

6 条回复 • 2016-05-11 13:41:17 +08:00

shui14

2016-04-18 17:25:56 +08:00

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

2016-04-18 17:38:43 +08:00

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

davin

2016-04-19 09:16:01 +08:00

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

xiaolongmou

2016-05-11 06:35:33 +08:00

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

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

xiaolongmou

2016-05-11 06:37:59 +08:00

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

davin

2016-05-11 13:41:17 +08:00

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