使用Raphael 画图(一) 基本图形 (javascript)

Raphael是什么？自己百度一下吧。

Raphael对主流浏览器兼容性很好。

 

开始要创建视图区域：

var paper = Raphael("myDiv", 580, 600);//创建视图区域

 

 

接下来就可以画图形了。

 

1，画圆：

var c = paper.circle(50, 89, 40);//画圆(x,y,r),r代表圆的半径

 

2，画矩形：

 

var r = paper.rect(100, 19, 80, 50,10);//画矩形(x,y,width,height,r),r代表矩形圆角，默认为0

 

3，画椭圆：

 

 

var e = paper.ellipse(50, 159, 40, 20);//画椭圆(x,y,rx,ry);

 

4，图片

 

var i = paper.image("heffalump.png", 200, 19, 80, 80);//图片(src,x,y,width,height);

 

5，text：

var t = paper.text(150, 250, "where\n amazing\n happens!");//text

 

 6，路径：

 

var p = paper.path("M10 10L 110 100");//路径

 

 7，set：几个图形合并在一起，方便统一管理，我是这样理解的。

var st = paper.set();//set
 st.push(
     paper.circle(330, 30, 15),
     paper.circle(310, 30, 15)
 );