SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）

维基百科：贝塞尔曲线

 

以二次贝塞尔曲线的公式为例：

 

js函数：

//p0、p1、p2三个点，其中p0为起点，p2为终点，p1为控制点
//它们的坐标用数组表示[x,y]
//t的范围是0-1
function qBerzier(p0,p1,p2,t){
    var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];
    var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];
    return [x,y];
}

 

通过函数，可以用L方法绘制贝塞尔曲线，但是这种方法是用直线将离散的点连接起来，只是因为点的距离很近，所以看上去是曲线，不够完美。所以绘制贝塞尔曲线，一般还是用path里的曲线命令比较好。

 

path路径绘制中，绘制贝塞尔曲线的命令包括：

Q 二次贝赛尔曲线 x1,y1 x,y

T 平滑二次贝塞尔曲线 x,y

C 曲线