N次贝塞尔曲线动画

<a target=_blank href="http://graph.jm47.com/">演示地址</a>

	
		<canvas id="mycanvas" width="1024" height="600" style="border:1px solid red;margin:10px;">不支持canvas</canvas>
<!--[if lt IE 9]>
    <script src="http://www.jm47.com/os/app/jmgraph/lib/html5.js" type="text/javascript"></script>    
    <script src="http://www.jm47.com/os/app/jmgraph/lib/excanvas.js" type="text/javascript"></script>
<![endif]-->

		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/common/jmUtils.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/common/jmModels.js" ></script>
			<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/common/jmProperty.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/common/jmEvents.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/common/jmControl.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmShape.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmPath.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmLine.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmCircle.js" ></script>
				<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmArc.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmPrismatic.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/shapes/jmBezier.js" ></script>
		<script type="text/javascript" src="http://www.jm47.com/os/app/jmgraph/jmGraph.js" ></script>
		<script type="text/javascript">

			
				var canvas = document.getElementById('mycanvas');
				var graph = new jmGraph(canvas);				
				var style = {
					stroke:'rgb(120,20,80)',
					lineWidth:3
				};
				style.shadow = new jmShadow(4,4,6,'rgb(39,40,34)');
				var psize = 6;
				var p0={x:160,y:200};
				var p1={x:200,y:80};
				var p2={x:400,y:100};
				var p3={x:420,y:210};
				var p4={x:500,y:120};

				var lstyle = jmUtils.clone(style);
				lstyle.stroke = 'rgba(131,237,111,0.7)';
				lstyle.lineWidth = 1;
				var path = graph.createShape('path',{style:lstyle,points:[p0,p1,p2,p3,p4]});
				graph.children.add(path);
				path.canMove(true);


				var bezier = graph.createShape('bezier',{style:style,points:[p0,p1,p2,p3,p4]});
				graph.children.add(bezier);
				bezier.canMove(true);

				var pstyle = jmUtils.clone(style);
				pstyle.fill = 'rgb(191,216,44)';
				var p0arc = graph.createShape('arc',{style:pstyle,center:p0,radius:psize,start:0,end:Math.PI * 2,width:psize,height:psize});
				graph.children.add(p0arc);
				p0arc.canMove(true);
				var p1arc = graph.createShape('arc',{style:pstyle,center:p1,radius:psize,width:psize,height:psize,start:0,end:Math.PI * 2,anticlockwise:true});
				graph.children.add(p1arc);
				p1arc.canMove(true);
				var p2arc = graph.createShape('arc',{style:pstyle,center:p2,radius:psize,start:0,end:Math.PI * 2,width:psize,height:psize});
				graph.children.add(p2arc);
				p2arc.canMove(true);
				var p3arc = graph.createShape('arc',{style:pstyle,center:p3,radius:psize,start:0,end:Math.PI * 2,width:psize,height:psize});
				graph.children.add(p3arc);
				p3arc.canMove(true);
				var p4arc = graph.createShape('arc',{style:pstyle,center:p4,radius:psize,start:0,end:Math.PI * 2,width:psize,height:psize});
				graph.children.add(p4arc);
				p4arc.canMove(true);

				

				//动画部分
				var mp0={x:160,y:500};
				var mp1={x:200,y:330};
				var mp2={x:400,y:280};
				var mp3={x:420,y:500};
				var mp4={x:540,y:300};
				var mp5={x:600,y:520};
				var mp6={x:700,y:400};
				var mlstyle = jmUtils.clone(lstyle);
				mlstyle.lineWidth = 2;
				mlstyle.stroke = '#086C0A';
				delete mlstyle.shadow;
				var mpath = graph.createShape('path',{style:mlstyle,points:[mp0,mp1,mp2,mp3,mp4,mp5,mp6]});
				graph.children.add(mpath);
				//path.canMove(true);

				var mbezierpath = graph.createShape('path',{style:style});
				graph.children.add(mbezierpath);
				var chplines = [];
				var chpstyle = jmUtils.clone(mlstyle);
				chpstyle.lineWidth = 1;
				chpstyle.stroke = 'rgb(142,142,15)';
				function getpoint(ps,t) {
					if(ps.length == 1) return ps[0];
					if(ps.length == 2) {					
						var p = {};
						p.x = (ps[1].x - ps[0].x) * t + ps[0].x;
						p.y = (ps[1].y - ps[0].y) * t + ps[0].y;
						return p;	
					}
					if(ps.length > 2) {
						//var nps = [];
						var ppp = graph.createShape('path',{style:chpstyle});
						graph.children.add(ppp);
						chplines.push(ppp);
						for(var i = 0;i < ps.length - 1;i++) {
							var p = getpoint([ps[i],ps[i+1]],t);
							if(p) {
								//nps.push(p);
								ppp.points.push(p);
							}
						}
						return getpoint(ppp.points,t);
					}
				}

				var t = 0;
				mpath.animate(function() {		
					if(t > 1) {
						t=0;
						mbezierpath.points = [];	
					}	
					for(var i in chplines) {
						graph.children.remove(chplines[i]);
					}
					var mp = getpoint(mpath.points,t);
					mbezierpath.points.push(mp);

					t += 0.005;					
				},10);
				
				graph.paint();				
			
		</script>