贝塞尔曲线

贝塞尔曲线是一个由确定点来生成曲线路径的方程，最初由法国工程师皮埃尔·贝塞尔用来作汽车的主体设计，该方程还可以用来生成动画的插值公式。

贝塞尔曲线方程如下：

其中:
n是阶数，一阶的时候是线性方程，阶数=确定点的个数-1;
i是表示所有点的序列索引，即P0,P1,P2……;
P表示点的坐标(x,y);
t表示时间自变量，并且介于0,1之间，可以等于0和1;

通过该方程，我们可以写出求某个时刻的点坐标函数：

其中参数points为所有的点,t为时刻，
arrangement是求排列组合的函数，可以在完整代码中看到。

这样我们可以在拥有多个点的序列后，再通过t的变化，就可以求出所有点组合成的贝塞尔曲线图形了：

for (i = 0; i < 1; i += 0.001) {
drawPoint.apply(this, bezier(points,i));
}

完整代码及演示(需要在支持canvas的浏览器中运行)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>bezier demo</title> </head> <body> <div style="width:800px;height:600px;background-color:#fac0c0;"> <canvas id="cvs" width="800" height="600">骚瑞，您的浏览器不支持canvas</canvas> </div> <script type="text/javascript"> var cvs=document.getElementById("cvs"), context=cvs.getContext("2d"), points=[]; function getXY(node){ var x=0, y=0; if (node.offsetParent) { while (node.offsetParent) { x += node.offsetLeft; y += node.offsetTop; node = node.offsetParent; } } else { node.x && (x += node.x); node.y && (y += node.y); } return [x,y]; } function drawPoint(x,y,c,b) { !b && (b=2); context.fillStyle=c || "red"; context.fillRect(x,y,b,b); } function bezier(points,t){ var i, n=points.length-1, x=0, y=0; function fn(p,n,i,t){ return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i); } for(i=0;i<n+1;i++){ x+=fn(points[i][0],n,i,t); y+=fn(points[i][1],n,i,t); } return [x,y]; } function factorial(n){ if(isNaN(n) || n<=0 || Math.floor(n)!==n){ return 1; } var s=1; while(n){ s*=n--; } return s; } function arrangement(n,r){ return factorial(n)/(factorial(r)*factorial(n-r)); } cvs.addEventListener("click",function(event){ var i, point=getXY(this), x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft), y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop); points.push([x,y]); context.clearRect(0,0,screen.width,screen.height); context.beginPath(); //points for(i=0;i<points.length;i++){ drawPoint(points[i][0],points[i][1],"blue",4); } //bezier for (i = 0; i < 1; i += 0.001) { drawPoint.apply(this, bezier(points,i)); } //line if(points.length==1){ context.moveTo(points[0][0],points[0][1]); }else if (points.length>1){ for(i=0;i<points.length;i++){ context.lineTo(points[i][0],points[i][1]); } context.lineWidth=0.2; context.stroke(); context.closePath(); } },true); </script> </body> </html>

更多贝塞尔曲线的相关知识请参考wikipedia 贝塞尔曲线