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()
常用命令及解释