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. :( Call to a member function Table() on a non-object 错误位置

    :( Call to a member function Table() on a non-object 错误位置 $Model不是模板,是你自己先前链接数据库返回的对象...我的是改为$Form

  2. Apache VirtualHost配置

    转载:http://www.cnblogs.com/wpjsolo/archive/2012/01/19/2327457.html 以lampp环境为例子,其他环境只是配置文件的路径不同. 先要在   ...

  3. Linux Tomcat 简介

    如今,基于Web的应用越来越多,传统的Html已经满足不了如今的需求.我们需要一个交互式的Web,于是便诞生了各种Web语言.如Asp,Jsp,Php等.当然,这些语言与传统的语言有着密切的联系,如P ...

  4. GIT的标准文档 使用和服务介绍

    http://www.kancloud.cn/kancloud/how-to-use-github/42192 1. 探索GitHub 熟悉Git的人几乎都知道并喜欢GitHub,反过来GitHub也 ...

  5. php远程抓取网站图片并保存

    以前看到网上别人说写程序抓取网页图片的,感觉挺神奇,心想什么时候我自己也写一个抓取图片的方法! 刚好这两天没什么事,就参考了网上一个php抓取图片代码,重点借鉴了 匹配img标签和其src属性正则的写 ...

  6. 42.旋转数组的最小元素[Get min value of rotated array]

    [题目] 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个排好序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5 ...

  7. mybatisforeach循环,传入多个参数

    上代码: controller: @RequestMapping(value = "/findPage", method = RequestMethod.POST) @Respon ...

  8. XML Parser Error on line 1: 前言中不允许有内容, Mybatis 生成代码

    使用用notepad++打开xml文件,然后在菜单“格式”中选择“以UTF-8无BOM格式编码”,保存.

  9. 优秀前端工程师应该掌握的内容(转自:github)

    程序 标准规范 ECMAScript HTTP 知识储备 作用域/闭包 数据结构 算法 编程范式 函数式 面向对象 基于原型 面向方面 设计模式 软件架构 MVC MVVM 安全 XSS CSRF 富 ...

  10. 家族(codevs 1073)

    题目描述 Description 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和 ...