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" class="wraper"></div> </body> </html>
代码实现的效果: