有没有简单方便点的canvas库可用？

V2EX = way to explore

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

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

有没有简单点的canvas库，在规定时间内绘制一些简单的Path，如果高级点还能支持各种时间曲线。

canvas

简单

有没有

11 条回复 • 1970-01-01 08:00:00 +08:00

hpyhacking

2012-09-17 17:17:56 +08:00

其实我要的功能很简单，实现一个15秒的计时器，这个计时器是沿着一个Div的边框环绕一圈的5px宽度的线条而已，线条颜色有渐变。

hpyhacking

2012-09-17 17:18:42 +08:00

一开始想用CSS3来做，但貌似没有什么比较简单的方法。现在是想叠一层canvas来做。

hpyhacking

2012-09-17 17:19:11 +08:00

实在不成最后只能改成倒数的数字了。

leecade

2012-09-17 17:42:35 +08:00

http://demos.bonsaijs.org/demos/pie/index.html

aligo

2012-09-17 17:54:15 +08:00

canvas应该还用不到库，直接画就是了
动画效果靠requestanimationframe使用
只要做一个根据输入不同duration画出不同结果的方法就好了

CoX

2012-09-17 19:13:30 +08:00

http://randomibis.com/coolclock/

可以参考一下

hpyhacking

2012-09-17 20:39:21 +08:00

@aligo
@leecade
@CoX

看了三位给的建议，都是很不错的方法，有些我一开始也考虑过，但还是太复杂了（相对于实现一个倒计时的显示效果来说）。

其实我的需求就是由一个原点开始绘制一个四边形最后回到原点，但绘制是在一定时间内完成的，绘制线条的颜色需要渐变一下。

自己写有点浪费了，没有方便点的还是换种方式实现吧，现在想了想采用数字倒数的方式加css3的渐变效果动画。

chuangbo

2012-09-17 23:09:35 +08:00

paper.js？

leecade

2012-09-18 00:41:27 +08:00

逼我，压箱底的：
http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript

chemhack

2012-09-18 03:12:01 +08:00

你们难道没有听说过 http://raphaeljs.com 么？

hpyhacking

2012-09-18 09:54:05 +08:00

@chuangbo
@leecade
@chemhack
各位推荐的库都非常不错，我很懒，我想要的只是这样一句话～

xxx.path({0,0}, {0, 100}, {100, 100}, {100, 0}, {0, 0}, '15s')

但这些库相对这个需求来说还是比较底层了。

paper.js与raphaeljs都很不错。