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

最新推荐文章于 2024-07-15 14:11:16 发布

weixin_34355715

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量75

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/i33/blog/102419

版权

为什么80%的码农都做不了架构师？>>>

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>

代码实现的效果：