Raphael学习笔记（2）--绘图（基本图形）
1、图形简介
?
与html5不同，Raphael提供了以下基本图形：矩形、圆形、椭圆形（html5只有矩形）。
?
Paper.rect(x,y,width,height,r)：绘制矩形；
参数含义：
x,y：矩形左上角相对于原点(0,0)的坐标；
width,height：矩形的宽度和高度；
r：矩形圆角的半径；
?
Paper.circle(x,y,r)：绘制圆形；
参数含义：
x,y：?圆心相对于原点(0,0)?的坐标；
r：圆的半径；
Paper.ellipse(x,y,cx,cy)：绘制椭圆形；
参数含义：
x,y：?椭圆的圆心相对于原点(0,0)的坐标；
cx：椭圆横轴的半径；
cy：椭圆纵轴的半径?；
?
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.rect(20,10,100,70);//绘制带有圆角的矩形raphael.rect(20,100,100,70,20);//绘制圆形raphael.circle(200,50,40);//绘制椭圆形raphael.ellipse(330,50,50,30);raphael.ellipse(330,140,30,50);});</script> </head> <body><div id="raphael_1" src="/img/2012/06/28/0415202938.png">