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

2012-09-17 17:12:47 +08:00
 hpyhacking
有没有简单点的canvas库,在规定时间内绘制一些简单的Path,如果高级点还能支持各种时间曲线。
3262 次点击
所在节点    程序员
11 条回复
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
aligo
2012-09-17 17:54:15 +08:00
canvas应该还用不到库,直接画就是了
动画效果靠requestanimationframe使用
只要做一个根据输入不同duration画出不同结果的方法就好了
CoX
2012-09-17 19:13:30 +08:00
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
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都很不错。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/47913

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX