两条平滑曲线相乘_平滑多条曲线

Canvas 画曲线(非圆弧)有两个方法：

1. quadraticCurveTo(cpx, cpy, x, y)

2. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

本文只讲quadraticCurveTo()，先来看如何画一条曲线。

我们需要曲线的 开始点(p0) 和 结束点(p1)，外加一个控制点(pc)，虽然说有3个点，但实际画图时，我们关心的只是开始点和结束点

可以看到曲线经过 p0 和 p1 两个点，控制点pc 只是用来调整曲线的形状的。

如果曲线要经过3个点呢？不好做了吧？

这里介绍一个公式，从上图可知，曲线不经过控制点，但曲线肯定会经过某个点，这个点怎么求呢？

xc = x1 * 2 - (x0 + x2) / 2;

yc = y1 * 2 - (y0 + y2) / 2;

(x0, y0) 是开始点，(x2, y2) 是结束点，(xc, yc) 是控制点，而 (x1, y1) 则是曲线会经过的某点。

继续刚才的3点画线，我们可以把第二个点当作点(x1, y1)，于是

如果有4个点呢？这里需要总结一个算法，先看一个图：

首先声明一下，这张图原本不是用来解释本文的，我从别处截来，但是可以讲解我想说的东西。

这条曲线很平滑，注意中间的两个黑点，他俩都是相邻控制点的中点，于是我得出了以下结论：

通过第一个控制点，循环算出之后的控制点，相邻的两个控制点的中点是曲线会经过的点。

仔细看3个点的例子，我们算出了控制点，它就是第一个控制点。

第二个控制点怎么算呢？

我们知道曲线会经过p2，所以 p2 是第一个控制点 和 第二个控制点的中点，于是

// (ctrlX, ctrlY) 是第一个控制点

ctrlX = 2 * x2 - ctrlX;

ctrlY = 2 * y2 - ctrlY;

之后的控制点都可以这样计算，下面我给出一段算法：

/**

* @param {object} c 即canvas.getContext('2d')

* @param {array} points 数组元素格式为{x: 0, y: 0}

*/

function drawMultipleCurves(c, points) {

var len = points.length;

if (len < 3) {

return;

}

// 计算第一个控制点

var ctrlX = 2 * points[1].x - 0.5 * (points[0].x + points[2].x);

ctrlY = 2 * points[1].y - 0.5 * (points[0].y + points[2].y);

// 画出前三个点的曲线

c.beginPath();

c.moveTo(points[0].x, points[0].y);

c.quadraticCurveTo(ctrlX, ctrlY, points[2].x, points[2].y);

if (len === 3) {

c.stroke();

return;

}

for (var i = 2; i < len - 1; i++) {

// 计算下个控制点

ctrlX = 2 * points[i].x - ctrlX;

ctrlY = 2 * points[i].y - ctrlY;

c.quadraticCurveTo(ctrlX, ctrlY, points[i + 1].x, points[i + 1].y);

}

c.stroke();

}

最后看一个经过6个点的曲线吧