贝塞尔曲线
贝塞尔曲线是一个由确定点来生成曲线路径的方程,最初由法国工程师皮埃尔·贝塞尔用来作汽车的主体设计,该方程还可以用来生成动画的插值公式。
贝塞尔曲线方程如下:
其中:
n是阶数,一阶的时候是线性方程,阶数=确定点的个数-1;
i是表示所有点的序列索引,即P0,P1,P2……;
P表示点的坐标(x,y);
t表示时间自变量,并且介于0,1之间,可以等于0和1;
通过该方程,我们可以写出求某个时刻的点坐标函数:
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];
}
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];
}
其中参数points为所有的点,t为时刻,
arrangement是求排列组合的函数,可以在完整代码中看到。
这样我们可以在拥有多个点的序列后,再通过t的变化,就可以求出所有点组合成的贝塞尔曲线图形了:
for (i = 0; i < 1; i += 0.001) {
drawPoint.apply(this, bezier(points,i));
}
drawPoint.apply(this, bezier(points,i));
}
完整代码及演示(需要在支持canvas的浏览器中运行):
更多贝塞尔曲线的相关知识请参考wikipedia 贝塞尔曲线