raphael学习笔记

位图是像素点，所以放大失真；失量图是通过算法描绘放大不失真

var paper=Raphael(id,100,100)——创建画布高宽为100，id为绘画的容器

var paper=Raphael(20,30,100,100)——在body上创建高宽为100的画布，（20,30,）距离容器左上角横向20个像素，垂直30个像素的地方

var circle=Raphael.circle(50,50,50)——画圆（前两个50是圆心，后面一个是半径）

Paper.rect(x,y,width,height,r)：绘制矩形；

x,y：矩形左上角相对于原点(0,0)的坐标；
width,height：矩形的宽度和高度；
r：矩形圆角的半径；

Paper.circle(x,y,r)：绘制圆形；

x,y： 圆心相对于原点(0,0) 的坐标；
r：圆的半径；

Paper.ellipse(x,y,cx,cy)：绘制椭圆形；

x,y： 椭圆的圆心相对于原点(0,0)的坐标；
cx：椭圆横轴的半径；
cy： 椭圆纵轴的半径 ；

Paper.path（）

  路径字符串由一个或多个命令组成，每个命令以一个字母开始，随后是逗号分隔（如"M10,20L30,40"）；大写表示命令是绝对的，小写表示命令是相对的比如(M20,20,40,40)其中(20,20)和(40,40)两个坐标都是相对于（0,0)位置来计算的，而(m20,20,40,40)中(20,20)是相对于(0,0)，(40,40)是相对于(20,20)来计算——m(20,20,40,40)相当于M(20,20,60,60)。

椭圆弧
x半径为38，y半径为38，第一个0为X轴与水平方向顺时针方向夹角，第二个0为小角度弧线，1表示顺时针方向

画完图形之后就可以向图形中填充属性：

circle.attr({
"fill":"#17A9C6", //填充颜色
"stroke":"#2A6570", //边框颜色
"stroke-width":2,//边框宽度
"stroke-opacity":"0.5",//透明度
"fill-opacity":"0.5",//透明度
"opacity":"0.5",//透明度
});

Raphael里面的动画animate

在raphael中可以直接把图片绘制上去，例如var img=paper.image("图片路径",20,20,20,20)——前两个二十表示起始坐标，后面的两个二十表示图片大小；也可以使用填充如：circle.attr({

 fill: "url(../images/mm.jpg)"

})