Raphael Javascript 是一个 Javascript的矢量库。
2010年6月15日，著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch，以及SVG、VML处理库Raphael合并，形成新的库Sencha。主要应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。
Raphael Javascript 的创始人 Dmitry Baranovskiy也加入ExtJS。
ExtJS 是一个强大的Javascript 框架，它重组件化，很容易做出强大的、可媲美客户端的界面（这个框架是收费的，所以国内用的人比jQuery少多了）。
jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。
Raphael Javascript 的作者就是大名鼎鼎的前端大牛 Dmitry Baranovskiy。
他出过几道有意思的 Javascript 题目：《你真的已经搞懂JavaScript了吗？》
Raphael能做什么？
Raphael Javascript可以处理SVG、VML格式的矢量图。
它使用SVG
W3C推荐标准和VML作为创建图形的基础，你可以用Javascript 操作Dom
很容易的创建出复杂的柱状图、走势图、曲线图等各种图表，可以画图，可以画出任意复杂度的图像，以及图表或图像裁剪和旋转等复杂操作。
同时它是跨浏览器的，完全支持 Internet Explorer 6.0+。
Raphael Javascript
目前支持的浏览器有：
Firefox 3.0+
Chrome 3.0+
Safari 3.0+
Opera
9.5+
Internet Explorer 6.0+
PS：新版本的遨游、QQ浏览器、TT浏览器（已经被腾讯放弃了）、猎豹浏览器、360浏览器
的内核都是 webkit（ Chrome 就是Webkit ），至于别的国产浏览器，都是在Internet Explorer 外面嵌套了一层壳而已
-----------------------------------------------------------
简而言之：
Raphael是一个强大易用的矢量图形JS库
------------------------- 动画 -------------------------
>> 动画 Animation ~~~动画对象的方法调用
> Animation.delay(t);
创建现有的动画对象的副本，并且可以指定延迟时间。
参数
t:number
动画延迟执行的时间，单位：毫秒ms
返回
新的动画对象
例子：
var anim = Raphael.animation({cx:
10, cy: 20}, 2e3); //调用静态方法animation创建一个动画对象 2秒内 圆心坐标移动到位置(10,20)处
var paper
= Raphael(100, 100, 300, 400); //在页面位置(100,100)处，创建300*400大小的画布
//在画布位置(40,
40)处画一个半径50的圆, 并填充红色 Raphael的语法和jq十分类似，同样支持链式调用风格
var circle =
paper.circle(40, 40, 50).attr("fill","red");
circle.animate(anim);
//立即执行动画
circle.animate(anim.delay(500)); // 延时500毫秒执行动画
> Animation.repeat(n); 创建现有动画对象的副本，并指定重复频率。
参数
n:number 动画迭代次数。如果传入
0，表示动画会一直执行
返回
新的动画对象
例子
circle.animate(anim.repeat(2));
circle.animate(anim.delay(500).repeat(2));
//链式调用
~~~所有Element的方法默认都返回元素自身，以便链式调用。
> Element.animate(...);
为指定元素创建动画，并执行。
参数：
params:object 元素的最终属性，请参照：Element.attr
ms:number
动画持续时间，单位：毫秒ms
easing:string
缓动类型。接受Raphael.easing_formulas其中之一，或CSS格式：cubic-bezier(XX, XX, XX,
XX)
callback:fn 回调函数。动画结束时将被调用。
或
animation:object
动画对象，请参照：Raphael.animation
返回
原始元素
> Element.animateWith(...); 作用与 Element.animate 类似，但保证动画与另一元素的同步执行。
~~参数中需额外指定需要同步动画的原速度
参数
el:object 要同步的元素
anim: object
要同步的动画
params:
ms:
easing:
callback:
或
el:
anim:
animation:
返回
原始元素
------------------------- 元素属性attr -------------------------
> Element.attr(...); 设置或读取元素的属性。类似
jQuery.fn.attr();
Element.attr(attrName,value);
Element.attr({attr1:v1,
attr2:v2});
Element.attr(attrName);
Element.attr(attrNames); 参数为attrNames数组
则返回指定属性名的当前值组成的数组
Elment.attr(); //返回属性对象
元素的属性有以下这些：（ 请参阅解释这些参数的SVG规范 。）
~~~
位置大小
height: number 高度
width: number
x : number
y: number
r :
number 圆、椭圆或圆角矩形的半径
cx : number 圆或椭圆的圆心的x轴坐标
cy : number
圆或椭圆的圆心的y轴坐标
rx : number 椭圆的横向半径
ry: number 椭圆的垂直半径
~~~ 背景描边透明度等
opacity : number 透明度
fill: string
填充。颜色、渐变或图像
fill-opacity: number 填充不透明度
stroke ： string
笔触颜色
stroke-width : number 笔触宽度（像素，默认为1）
stroke-opacity: number
stroke-dasharray ： string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”,
“--.”, “--..”]
stroke-linecap ： string [“butt”, “square”,
“round”]
stroke-linejoin : string [“bevel”, “round”,
“miter”]
stroke-miterlimit : number
~~~ 图象文本超链接等
text : string 文本元素的内容。使用\n换行
text-anchor : string
[“start”, “middle”, “end”]，默认为 “middle”
title : string 工具提示内容
src ； string 图像的URL，只适用于Element.image元素
href : string URL。指定时，元素表现为超链接
target : string 与 href 一起使用
cursor : string 光标css类型
paths: tring SVG的路径字符串格式
transform : string
请参照：Element.transform
~~~ 字体以及其他属性
font : string 文本特性
font-family : string 字体
font-size :
number 字体大小（像素）
font-weight: string 字体粗细
arrow-end : string 路径的末尾显示箭头。
clip-rect : string
剪贴矩形。逗号或空格分隔的值：x，y，宽度和高度
>> 线性渐变和径向渐变
> 线性渐变值的格式
<angle>-<color>-[<color>[:<offset>]]*-<color>
el.attr({"fill":
"90-#fff-#000"}); //90°线性渐变从白色到黑色；
el.attr({"fill": "0-#fff-#f00:20-#000"});
//0°从白色通过红色（20％位置）渐变为黑色。
> 径向渐变值的格式 ： r[(<fx>,
<fy>)]<color>[-<color>[:<offset>]]*-<color>
~~~跟线性渐变值格式基本相同 只不过是角度变为可选的渐变起点
径向渐变只适用于圆形和椭圆形。
circle.attr({"fill":
"r#fff-#000"}); //从白色到黑色；
circle.attr({"fill": "r(0.25, 0.75)#f00-#000"});
//从白色渐变到黑色，焦点在0.25，0.75。焦点坐标的外围是0 .. 1。
颜色解析
颜色名称： red,green...等
十六进制颜色值：#fc00, #fad0ea
颜色函数：
rgb(),
hsb(), hsl(),三种色彩模式的函数，参数值为整数或百分比
rgba(), hsba(), hsla()
都支持透明度
例子:
rgb(200,200,10) , rgb(100%,10%,20%)
rgba(200,200,3, .5),
rgba(100%, 20%, 10%, 50%)
hsb(0.5, 0.25, 1), hsb(50%, 20%,
100%)
hsba()
------------------------- 事件 -------------------------
>
Element.click(handler); //handler内部
this指向元素自身，注意在这里元素和节点是不同的，它们的关系类似jQuery对象和封装的dom对象
> Element.dblclick(handler);
> Element.drag(onmove, onstart, onend, [mcontext], [scontext],
[econtext]);
onmove:fn 移动处理函数 函数内部可获得 dx dy x y event (位移距离deltaX deltaY 鼠标坐标
dom事件对象)
onstart:fn 拖拽开始的处理函数 函数内部可获得 x y event (鼠标坐标和dom事件对象)
onend: fn
拖拽结束处理函数 函数内部可获得 event (dom事件对象)
mcontext : object 移动处理函数环境（上下文）
scontext
: object 拖拽开始处理函数环境
econtext : object 拖拽结束处理函数环境
------------------------- 元素操作 -------------------------
>
Element.clone();
------------------------- 数据缓存 -------------------------
>
Element.date(key, [value]); 添加或检索与给定的键关联的值。请参照：Element.removeData
~~~
类似jQuery.fn.data()方法，保存或读取数据
例子：
for(var i=0; i<5; i++){
var paper
= Raphael(‘sample1‘, 200, 200);//在id=sample1的元素上 创建画布
paper.circle(10+15*i,
10, 10)
.attr({"fill": "#000"})
.data("i",i);
.click(function(){
alert(this.data("i")); //事件处理函数内部 this指向元素自身
});
}
------------------------- 元素位置大小 -------------------------
>
Element.getBBox(isWithoutTransform); 返回指定元素的边界框
isWithoutTransform : boolean
如果你想得到变换之前的边界，使用true。默认值为 false。
返回 边界对象 { x:n, y:n, x2:n, y2:n, width:n,
height:n} ~~~ 左上角坐标(x,y) 右下角坐标(x2,y2) 宽 高
> Element.getPointAtLength(length); 返回在指定路径上指定长度的坐标点。只适用于“路径”类型的元素。
返回
{ x:n, y:n, alpha:切线的角度}