raphael.js 使用指南

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");

常用命令及解释

raphael.js 使用指南

（9）处理文本text()

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

（10）处理变形transform()

常用命令及解释

raphael.js 使用指南

秒客网

raphael.js 使用指南

相关文章