Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

Raphael是跨浏览器的矢量图形库,目前支持的浏览器包括:Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+以及Internet Explorer 6.0+。

官网地址:http://raphaeljs.com/

英文帮助文档:http://raphaeljs.com/reference.html

中文帮助文档:http://lab.wangyuanwai.com/raphael-js/docs/

学习之前,先看下一些例子:

Raphael Playground

Reflection

Image rotation

Test rotation

Github-a-like impact chart

Github-a-like punch chart

Github-a-like languages chart

Raphael Analytics chart

Polar Clock

Dynamic Spinner

Australian Map

Multichart

Animation

Tiger

Hand

Interactive Chart

Diagram

Custom Fonts

Animation Easing

Gradients Example

Curver

Animation along the path demo

3D Shooter

Colour Picker

Growing Pie

Bounce

World Map

 

svg―Raphael.js Library的更多相关文章

  1. svg―Raphael.js Library(一)

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  2. 强大的矢量图形库:Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  3. svg绘图工具raphael.js的使用

    1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...

  4. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  5. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  6. Javascript实战开发:教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  7. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  8. raphael.js 给元素 hover 添加glow() 外发光

    用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx ,  xxx , 还有xxx $(document).ready(function() { var ...

  9. 【js类库Raphaël】使用raphael.js根据点坐标绘制平滑曲线

     一.可供参考的文档资料. raphaeljs官网:http://raphaeljs.com/ w3c关于path的介绍:http://www.w3.org/TR/2003/REC-SVG11-200 ...

随机推荐

  1. win10 x64下安装oracle 12c出现[INS-30131]报错的解决方案

    解决方案: 第一步:控制面板>所有控制面板项>管理工具>服务>SERVER 启动 第二步:控制面板>所有控制面板项>管理工具>计算机管理>系统工具> ...

  2. 基础知识《零》---Java程序运行机制及运行过程

    Java运行机制 Java虚拟机(Java Virtual Machine):Java虚拟机可以理解成一个以字节码为机器指令的CPU:对于不同的运行平台,有不同的虚拟机:Java虚拟机机制屏蔽了底层运 ...

  3. 【原创】Js:日期处理(日期格式必须【yyyy-mm-dd】才能转成long的毫秒!其他的不是【年-月-日】的格式,结果会是【NaN】)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 【转】仿百度输入框智能提示的js代码

    转自:http://www.jb51.net/article/40783.htm 对于我这个JS菜鸟,能找到这样的实属不容易啊!!! 刚开始老大让做这个功能,真是一点头绪都没有,万分感谢!!! 最近客 ...

  5. Android Studio项目整合PullToRefresh的问题记录

    PullToRefresh下拉刷新在App中应用非常频繁,然而PullToRefresh是在ADT下开发完成的.如果要将其整合到Android Studio目录下的话颇费周折.前面的文章“Androi ...

  6. 当年的文曲星cc800

    你还记得当年的cc800吗?还记得黄金英雄传说吗?还记得用cc800编程的日子吗... 今天突然想起了我的cc800,好怀念那段爬在家里的阳台的木架子上,挠着头,编程序的日子...可惜,当时比较穷,没 ...

  7. php中正则表达式的匹配和数据验证总结

    正则表达式能匹配复杂的字符串形式,比字符串处理函数功能更加多,只不过执行效率有所降低,但是可以实现非常复杂的匹配,下面总结一下 1.简单的字符串匹配,判断指定字符串是不是在另一个字符串中,和字符串查找 ...

  8. Android中获取蓝牙log

    1.蓝牙的snoop log存放位置 /etc/bluetooth/bt_stack.conf   2.修改方法 #关闭蓝牙 修改bt_stack.conf文件中打印log的等级 adb root a ...

  9. ***git 本地提交后如果让服务器上的GIT 自动更新拉取

    Q: 最近配了个服务器,用的GIT,本地提交后服务器必须再拉取一下才能更新出来..求个提交后自动更新的方法 A: 最佳工具 git hook post-update.sample 改名为post-up ...

  10. 10年程序员谈.Net程序员的职业规划(图/文) (转载)

    转载地址:http://www.cnblogs.com/donghongtao/p/3611623.html