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. VS2008+Qt+助手 智能提示不显示、Qt关键字不高亮的解决办法【已解决】

    笔者使用的开发环境是VS2008+Qt4.8.5+VAssistX,有时候会出现代码关键字不能高亮显示,并且助手的智能提示不显示.问题如下 解决的办法是在助手的选项中设置其搜索路径,助手的设置通过VS ...

  2. Android通过URL加载网络图片

    public static Bitmap getBitmap(String path) throws IOException { URL url = new URL(path); HttpURLCon ...

  3. js判断元素是否隐藏的方法

    代码如下: JavaScript代码如下: if( document.getElementById("div").css("display")==='none' ...

  4. MAC的OS X10.10更新以后进入用户界面就死机

    我用的是搜狗输入法,所以把搜狗卸载就好了.(注意是卸载,不是单纯的从输入源里移除) 下载一个搜狗输入法的DMG,打开后选择卸载搜狗输入法. 转自: http://zhidao.baidu.com/qu ...

  5. 【Django】Django 直接执行原始SQL 如何防止SQL注入 ?

    代码示例: #错误--不要直接格式化字符串 query = 'SELECT * FROM myapp_person WHERE last_name = %s' % lname Person.objec ...

  6. 【云计算】docker registry v2简介

    ubuntu docker方式部署docker registry v2 2016-03-03 17:36 by JackieHan, 4 阅读, 0 评论, 收藏,  编辑 生成自己签名的证书 生成签 ...

  7. 如何让你的scrapy爬虫不再被ban之二(利用第三方平台crawlera做scrapy爬虫防屏蔽)

    我们在做scrapy爬虫的时候,爬虫经常被ban是常态.然而前面的文章如何让你的scrapy爬虫不再被ban,介绍了scrapy爬虫防屏蔽的各种策略组合.前面采用的是禁用cookies.动态设置use ...

  8. Java for LeetCode 154 Find Minimum in Rotated Sorted Array II

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  9. codeforces B. The Fibonacci Segment 解题报告

    题目链接:http://codeforces.com/problemset/problem/365/B 题目意思:简单来说,就是要找出最长的斐波纳契长度. 解决的方法不难,但是要注意更新左区间和右区间 ...

  10. Maven简介

    转载地址:http://www.cnblogs.com/itech/archive/2011/11/01/2231837.html Ant是软件构建工具,Maven的定位是软件项目管理和理解工具.Ma ...