Raphael入门实例：绘图

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	var c = paper.circle(50, 50, 40);

 

绘制椭圆参数说明

?

1	var c = paper.ellipse(50, 50, 40, 20);

 

绘制矩形参数说明

?

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 t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

Raphaëlkicksbutt!

嵌入图像参数说明

?

1	var c = paper.image("apple.png", 10, 10, 80, 80);