收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2196|回复: 0

推荐一个绘制矢量图形的js库 Raphaël

[复制链接]
发表于 2011-10-31 12:16:01 | 显示全部楼层 |阅读模式
本帖最后由 xiaobaov2 于 2011-10-31 12:27 编辑

你是不是经常究竟在用到javascript绘图时纠结于IE的不支持canvas,纠结于canvas绘图API的繁琐纠结?现在你可以从这种纠结中摆脱出来了。

对,Raphaël是一款轻量的用于web的矢量绘图javascript库,用它你可以很简单的创建各类矢量图形,而且它本身还支持丰富的接口以及各种事件处理。更关键的是它绘出的图像都是矢量的。当然你也可以创建一个包含位图的图像。

Raphaël是使用SVG和VML进行绘图的,所以不要担心兼容性,它支持FireFox3.0+,Chrome5.0+,Opera9.0+以及Internet Explorer6.0+,对你没看错,它完美支持IE6+。而且Sencha Labs也使用了这个库。

怎么样心动了吧?心动不如行动,赶快拿起手中的电话订购吧,呃,赶快用你的鼠标点击下载使用吧!

简单的使用方法:
  1. // Creates canvas 320 × 200 at 10, 50
  2. var paper = Raphael(10, 50, 320, 200);
  3. // Creates circle at x = 50, y = 40, with radius 10
  4. var< circle = paper.circle(50, 40, 10);
  5. // Sets the fill attribute of the circle to red (#f00)
  6. circle.attr("fill", "#f00");
  7. // Sets the stroke attribute of the circle to white
  8. circle.attr("stroke", "#fff");
复制代码
这里是我写的一个示例文件,点击查看

官方网址

官方使用手册
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-15 01:34 , Processed in 0.096436 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表