raphaeljs，畫圖，最關(guān)鍵的需要理解SVG的path，而難點(diǎn)在于path是遵循貝塞爾曲線的，貝塞爾曲線是由起始點(diǎn)和終點(diǎn)以及兩個控制點(diǎn)總共4個點(diǎn)來確定曲線的走向的，曲線的函數(shù)是一個基于時(shí)間的動態(tài)函數(shù)。具體貝塞爾曲線的方程參看這里http://zh.wikipedia.org/wiki/%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9A
而SVG中各個說明如下：http://en.wikipedia.org/wiki/Scalable_Vector_Graphics和http://www.w3.org/TR/SVG/paths.html
用raphaeljs畫曲線的demo：http://fanstu.sinaapp.com/god/raphaeljs/path.php
具體path的字符串含義：
M moveto (x y)+
Z closepath (none)
L lineto (x y)+
H horizontal lineto x+
V vertical lineto y+
C curveto (x1 y1 x2 y2 x y)+
S smooth curveto (x2 y2 x y)+
Q quadratic Bézier curveto (x1 y1 x y)+
T smooth quadratic Bézier curveto (x y)+
A elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom curveto* x1 y1 (x y)+
這里，M代表起始點(diǎn)的位置，也就是說利用raphael從哪個坐標(biāo)開始畫，如果是畫直線，那么L指向的位置是直線的終點(diǎn)。H和V代表水平和垂直的直線。C是最常用的也是參數(shù)最多最復(fù)雜的，C代表curve就是基于被賽爾曲線的path，x1 y1 x2 y2是兩個控制點(diǎn)的坐標(biāo)，x y是終點(diǎn)。而S，Q，T都是C的升級版平滑和二階及二階平滑。
當(dāng)然raphael也提供了基礎(chǔ)的比如circle，rect，text和image等元素，構(gòu)造這樣的對象直接用于畫圖控制，利用raphael已經(jīng)可以做任何畫圖了。