使用Raphael 画图之路径

参考：http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html

http://czpae86.iteye.com/blog/819225

M = 开始位置 参数:(x y)

/*  命令解释：M = moveto   参数:(x y)

L = 到达位置 参数:(x y)

			L = lineto  参数:(x y)

H = horizontal lineto 参数:(x)

			H = horizontal lineto    参数:(x)

V = vertical lineto 参数:(y)

			V = vertical lineto   参数:(y)

C = curveto 参数:(x1 y1 x2 y2 x y)

			C = curveto   参数:(x1 y1 x2 y2 x y)

S = smooth curveto 参数:(x2 y2 x y)

			S = smooth curveto   参数:(x2 y2 x y)

Q = quadratic Belzier curve 参数:(x1 y1 x y)

			Q = quadratic Belzier curve   参数:(x1 y1 x y)

T = smooth quadratic Belzier curveto 参数:(x y)

			T = smooth quadratic Belzier curveto   参数:(x y)

A = elliptical Arc 参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

			A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

Z = 关闭路径 参数(none)

实例：

<html>
<head runat="server"><title>使用Raphael 画图,路径(一)</title><script src="Js/jquery-1.3.2.js" type="text/javascript"></script><script src="Js/raphael.js" type="text/javascript"></script><!--通过SVG/VML+JS实现跨浏览器的矢量图形库--><script type="text/javascript" charset="utf-8"> $(document).ready(function(){var paper = Raphael("canvas", 580, 600);//创建视图区域    var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2}); //M表示：开始于位置       x坐标：250 y坐标：150//L表示：到达位置         x坐标：180 y坐标：350//然后从那里开始到        x坐标：350 y坐标：350//z表示：最后在           x坐标：250 y坐标：150 关闭路径。 var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2});   var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2});   var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});   var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2}); });   </script> 
</head>
<body><form id="form1" runat="server"><div><div id="canvas"></div> </div></form>
</body>
</html>

效果：

使用Raphael 画图 之 路径

使用Raphael 画图之路径