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. lvs之ip-tun(ip隧道)技术的学习与实践

    1.配置测试环境 修改IP windows 200.168.10.4 lvs server  ip:200.168.10.1 因为IP隧道模式只需要一个网卡  所以就停掉其他网卡 web server ...

  2. Android音频播放实例

    MediaPlayer: 此类适合播放较大文件,此类文件应该存储在SD卡上,而不是在资源文件里,还有此类每次只能播放一个音频文件. 1.从资源文件中播放 MediaPlayer player = ne ...

  3. RouterOS DNS劫持 -- A记录

    通常我们使用RouterOS的DNS主要是用于实现DNS缓存功能,即由RouterOS实现DNS服务器解析功能,除了这个功能,RouterOS可以实现对内网域名解析劫持,即实现路由网关的A记录查询. ...

  4. 基于Delphi的三层数据库系统的实现方法

    基于Delphi的三层数据库系统的实现方法   1  引言 当前的数据库应用系统中,按其结构划分为两类,一类是两层结构的数据库应系统,另一类是多层结构的数据库应用系统. 两层结构的数据库应用系统包括客 ...

  5. BestCoder16 1002.Revenge of LIS II(hdu 5087) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5087 题目意思:找出第二个最长递增子序列,输出长度.就是说,假如序列为 1 1 2,第二长递增子序列是 ...

  6. BroadcastReceiver study

    BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的广播. 在Android系统中,广播体现在方方面面,例如当开机完成后系统会产生一条广播,接收到这 ...

  7. c++ 继承 虚函数与多态性 重载 覆盖 隐藏

    http://blog.csdn.net/lushujun2011/article/details/6827555 2011.9.27 1) 定义一个对象时,就调用了构造函数.如果一个类中没有定义任何 ...

  8. 第六步:Lucene查询索引

    package cn.harmel.lucene; import java.io.IOException; import java.nio.file.Paths; import org.apache. ...

  9. hdu 4666:Hyperspace(最远曼哈顿距离 + STL使用)

    Hyperspace Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Tota ...

  10. python网页爬虫

    1. 静态页面爬取 这类最简单啦,右键->查看页面源码时,想下载的信息都能够显示在这里,这时只需要直接down页面源码,代码如下: # Simple open web import urllib ...