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

JavaScript012

初识Raphael.js---强大的矢量图形库,第1张

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

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

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

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

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

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

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

官网更多demo示例:

没有学过该库。不过可以猜想一下,基于js的话,js中绘图是基于canvas元素的。而canvas中的话,path方法估计就是基于这个:

beginPath()

lineTo(坐标)

closePath().

具体的话,可以参看w3c的教程中有关canvas部分。