初识Raphael.js---强大的矢量图形库

首先，我和你一样很迷茫这个库，不知道它是用来干嘛的。

只记得任务来了，顺便给了一本全英文的电子书，关于这个库的所有文档都写的清清楚楚，网站上关于它的中文文档也是少之又少，就一边看文档，一边上网上搜一下官方文档的示例，这样会比丛头看到尾好很多。

因为即使你从头开始，把这个全英文的文档看一遍，脑子里依旧是一片浆糊，真正开始去做的时候，又无从下手，倒不如带着开发任务去看文档，需要用到什么就去翻文档，这样就事半功倍。

1. 先来大致了解下RaphaelJS库是用来干嘛的？

Raphael 是一个用于在网页中绘制矢量图形的Javascript 库。

它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。

2. 它目前支持的浏览器有？

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

3. RaphaelJS 入门的一个简单示例：

• 用之前肯定要先引入这个库文件，类似于我们自己的html文件中引入相应的js操作一样的。

  • raphael.min.js查看链接地址，打开后ctrl+s就能保存到本地

• 在页面中引入 raphael.js 文件之后，我们就可以绘制任意的矢量图形了：

这里简单写个画圆的示例：

• 创建一个画布，作为我们画图的容器，参数指定坐标x,y 以及画布的宽高；
• 类似与canvas，调用circle方法，指定圆心坐标，圆半径；
• 填充图形、描边。

// 在坐标（10,50）创建宽320，高200的画布
var paper = Raphael(10, 50, 300, 200);
 
// 在坐标（x = 50, y = 40）绘制半径为 10 的圆
var circle = paper.circle(50, 40, 10);
 
// 给绘制的圆圈填充红色 
circle.attr("fill", "red");
 
// 设置画笔（stroke）的颜色为白色
circle.attr("stroke", "#fff");

image

这样就在页面上展示了一个圆形。

官网更多demo示例：

image

4.更多可以查看文档

• 关于RaphaelJS的简介以及入门示例、库文件的下载地址

• 开发者文档，包含各种方法