?
1、路径简介
?
Paper.path(pathString)：绘制路径；
参数含义：
pathString：描述路径的字符串；
?
下面详细描述一下路径字符串的内容和书写风格。
路径由2部分组成：命令和坐标。
（1）命令：单个大（小）写字母。大写字母表示绝对坐标，小写字母表示相对坐标；
（2）坐标：一个或多个数字。多个数字之间使用逗号或者空格隔开；
（3）命令和坐标之间可以有空格，也可以省略空格；
?
移动坐标 M(m) moveto (x y)+
结束路径 Z(z) closepath (none)
直线 L(l) lineto (x y)+
水平直线 H(h) horizontal lineto x+
竖直直线 V(v) vertical lineto y+
3次贝塞尔曲线 C(c) curveto (x1 y1 x2 y2 x y)+
平滑3次贝塞尔曲线 S(s) smooth curveto (x2 y2 x y)+
2次贝塞尔曲线 Q(q) quadratic Bézier curveto (x1 y1 x y)+
平滑2次贝塞尔曲线 T(t) smooth quadratic Bézier curveto (x y)+
椭圆曲线 A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
?
绘制光滑的2次、3次贝塞尔曲线需要注意：
（1）后一段曲线的起点必须是前一段曲线的终点；
（2）前后2段曲线必须对称；
?
关于贝赛尔曲线的知识，可以参考下面的文章：canvas中的贝赛尔曲线。
?
2、绘图实例
?
下面让我们看看代码的书写：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
.wraper {
position: relative;
float: left;
width: 400px;
height: 400px;
margin-left: 10px;
margin-top: 10px;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var raphael = new Raphael('raphael_1',400,400);
//绘制路径(三角形)
raphael.path('M 160,100 L270,130 L200,170 z');
//绘制路径(T型)
raphael.path('M 50,190 H80 V220 H110 V250 H20 V220 H50 z');
});
</script>
</head>
<body>
<div id="raphael_1" class="wraper"></div>
</body>
</html>
?实现的效果：
?