`
2008winstar
  • 浏览: 58209 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke： 写的很好，也可以看看那这个文章，我感觉学的还可以。http:/ ...
    HTML

RaphaelJS

 
阅读更多

    RaphaelJS是一个用JavaScript实现的强大的矢量图形库。

    （1）使用前准备，下载RaphaelJS，到官网下载。

    （2）在相应的HTML页面引入RaphaelJS，如下示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>RaphaelJS Demo</title>
</head>
<body>
	<div id="paperDiv" style="width: 140px; padding:0px; margin:0px"></div>
	<script src="raphael-min.js"></script>
</body>
</html>

 

   （3）在通过元素创建一个对象

var elm = document.getElementById("paperDiv");
var paper = Raphael(elm, 560, 400);

 

     或者，直接将元素的id传到Raphael中，如：

var paper = Raphael("paperDiv", 650, 400);

 

   （4）画圆circle()

//var cir = paper.circle(x, y, r);
//x和y为坐标，r为圆的半径
var cir = paper.circle(35, 25, 20);

 

   （5）为形状设置属性attr()

/*
  语法如下：
  element.attr({
    "property1": value1,
    "property2": value2
  })
*/

 

   如画一个有填充颜色的圆：

var coloredCircle = paper.circle(35, 25, 20).attr({
    "fill": "#17A9C6",
    "stroke": "#2A6570",
    "stroke-width": 2
});

 

   （6）画矩形rect()

//语法：
//paper.rect(x, y, width, height, border-radius[optional]);
//常规矩形
var rect = paper.rect(20, 20, 170, 100);

//圆角矩形
var roundedRect = paper.rect(20, 20, 170, 100, 20);

 

   （7）画椭圆形ellipse()

//语法：
//paper.ellipse(x, y, rx, ry);
var ellipse = paper.ellipse(195, 125, 170, 100);

 

   （8）画路径path()

var tri = paper.path("M0,0L26,0L13,18L0.0");

   常用命令及解释



 

   （9）处理文本text()

//语法：
//paper.text(x, y, "text");

 

   （10）处理变形transform()

   常用命令及解释 


 

  • 大小: 38.5 KB
  • 大小: 6.2 KB
分享到：
| Java基础知识（一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics