raphaeljs图形库学习笔记
官网地址：点我
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var paper = Raphael("canvas", 640, 480);
paper.path({fill: "#000"},"M20,20L100,110z")
};
</script>
<title>直线</title>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var paper = Raphael("canvas", 640, 480);
var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000)
};
</script>
<title>移动圆形</title>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
animate 函数中的哈希为变化后的圆的坐标与半径（radii）。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var paper = Raphael("canvas", 640, 480);
paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});
paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z");
};
</script>
<title>扇形</title>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
要点：h为水平延伸，后面跟着一个数值为延伸的距离，负数为向左，正数为向右。
我们再来看a的参数：rx ry x-axis-rotation large-arc-flag sweep-flag x y，相当于水平半径，垂直半径，是否以x轴旋转，是否为大弧，是否顺时针，最终x坐标，最终y坐标。
弧度(radians) = 角度(degrees) * Math.PI /180
角度(degrees) = 弧度(radians) * 180 / Math.PI
180 度大约等于 3.14…弧度。换句话讲，半圆为 pi 个弧度，整圆为 2 pi 个弧度，一个弧度大概为 57.29…度。
large-arc-flag:true sweep-flag:true，大弧，顺时针
large-arc-flag:true sweep-flag:false，大弧，逆时针
large-arc-flag:true sweep-flag:false，小弧，顺时针
large-arc-flag:false sweep-flag:false，小弧，逆时针
画出40%在圆中所占的比例。
初级饼图
在javascript与flash的坐标系中，角度是以顺时针计算的，并以 0 度为起点 向正 X 轴引一条线，这就意味顺时针旋转角度为正角。逆时针就意味着为负角。
sin求出y轴的值，cos求出x轴的值。
- lineTo：画一条直线
- cplineTo：画一条三次方贝塞尔曲线（传入三个参数）
- curveTo：画一条方贝塞尔曲线（二次或三次）
- qcurveTo：画一条二次方方贝塞尔曲线
- arcTo：画一个弧（参数：rx, ry, large_arc_flag, sweep_flag, x2, y2）
画虚线要用stroke-dasharray属性，同时不能共用stroke-width属性。