Raphael学习笔记（2）--绘图（基本图形）

lib

浏览: 136021 次
性别:
来自: 济南

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
绘图
raphael

web前端绘图 raphael

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>

代码实现的效果：