raphael 实例
开始
创建画布参数说明
创建一个画布对象。
下面每个例子都会创建一个320*200大小的画布。
1
2
|
// 1.在视口的 (10,50) 坐标位置上创建画布
var
paper = Raphael(10, 50, 320, 200);
|
1
2
|
// 2.在#element_id元素的原点位置创建画布
var
paper = Raphael(document.getElementById(
"element_id"
), 320, 200);
|
1
2
|
// 3.同上
var
paper = Raphael(
"element_id"
, 320, 200);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 4.导出图片
var
set = Raphael([
"element_id"
, 320, 200, {
type:
"rect"
,
x: 10,
y: 10,
width: 25,
height: 25,
stroke:
"#f00"
}, {
type:
"text"
,
x: 30,
y: 40,
text:
"Dump"
}]);
|
Dump
绘图
绘制矩形参数说明
1
2
|
// 标准矩形
var
c = paper.rect(10, 10, 50, 50);
|
1
2
|
// 圆角矩形
var
c = paper.rect(40, 40, 50, 50, 10);
|
绘制路径参数说明
绘制箭头的例子见改变属性
1
2
3
|
// 绘制直线
// 移动到(10,10),绘制直线到(90,90)
var
c = paper.path(
"M10 10L90 90"
);
|
1
2
|
// 绘制2次贝赛尔曲线
var
c = paper.path(
"M20,120 Q100,10 180,90"
);
|
1
2
|
// 绘制2次贝赛尔曲线,平滑连接
var
c = paper.path(
"M20,120 Q100,10 180,90 T280,70"
);
|
1
2
|
// 绘制3次贝赛尔曲线
var
c = paper.path(
"M20,20 C50,80 150,160 180,40"
);
|
1
2
|
// 绘制3次贝赛尔曲线,平滑连接
var
c = paper.path(
"M20,20 C50,80 150,160 180,40 S320,200 100,190"
);
|
嵌入图像参数说明
1
|
var
c = paper.image(
"apple.png"
, 10, 10, 80, 80);
|