初识Raphael.js---强大的矢量图形库
2017-11-14 本文已影响0人
_信仰zmh
首先，我和你一样很迷茫这个库，不知道它是用来干嘛的。
只记得任务来了，顺便给了一本全英文的电子书，关于这个库的所有文档都写的清清楚楚，网站上关于它的中文文档也是少之又少，就一边看文档，一边上网上搜一下官方文档的示例，这样会比丛头看到尾好很多。
因为即使你从头开始，把这个全英文的文档看一遍，脑子里依旧是一片浆糊，真正开始去做的时候，又无从下手，倒不如带着开发任务去看文档，需要用到什么就去翻文档，这样就事半功倍。
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.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
