js画图工具:Raphael绘制矢量图学习笔记(1)–简介

http://lblovesnow-163-com.iteye.com/blog/1478090

更多资料可以参考楼主的文章

Raphael是一个JavaScript类库,用来在web上绘制矢量图。Raphael通过判断浏览器的不同,创建svg或vml对象,从而达到跨浏览器的效果。【svg简介,svg入门教程,vml简介,vml入门教程】
这意味着,无论是svg还是vml对象,都是一种DOM对象,所以我们可以为它们绑定事件或者修改它们。
Raphael支持用户自定义的扩展,我们可以在此之上扩展自己的组件。例如:gRaphael就是基于raphael创建的图形类库。
Raphael支持的浏览器:Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+

使用Raphael很简单:创建画布,绘制图形,设置样式。代码如下:

这只是一个非常简单的例子,展示了raphael的使用。如果以前接触过svg、vml或者canvas,那么raphael上手很容易。raphael支持链式写法(类似于JQuery),但是,需要注意一点,new出来的Raphael返回的是Paper对象,通过Paper创建的图形返回的是Element对象,这就要求我们要熟悉哪些对象包含哪些方法,否则在链式书写的过程中会出现错误。

Raphael的创建有很多种,除了上面的那种之外,还有以下2种: