绘制贝塞尔曲线

只是靠直线和弧线来画图是不够的，面对一些更加复杂但是有规律的图形时，我们需要另外一个更加强而有力的工具——贝塞尔曲线。

在 canvas 里，贝塞尔曲线有二次方和三次方两种形式，区别就在于控制点的数目，二次方的只有一个控制点，而三次方的则有两个。

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

这里的贝塞尔曲线的用法同样的很简单的，但是却不像在 Photoshop 或者 Illustrator 里画曲线那么轻巧了，它是非常需要触觉和耐心的。所以上面强调了有规律这个关键词。
实际上是什么感觉，大家亲身体验吧，看看下面的示例。

var colors = ["ec460c", "1e951e", "2692f7", "ea62f6"];
var cp1 = 60;
var cp2 = 160;
var y1 = 150;

for (var i=0; i< colors.length; i++) {
	ctx.beginPath();
	ctx.moveTo(25,75);
	ctx.bezierCurveTo(85,75,cp1,y1,100,y1);
	ctx.bezierCurveTo(cp2,y1,120,35,190,35);

	cp1 -= 10;  // 使控制点 1 横坐标左移 10 像素
	cp2 += 10;  // 使控制点 2 横坐标右移 10 像素
	y1 += 20;    // 是曲线低点下降 20 像素

	ctx.strokeStyle = "#" + colors[i];
	// 设置线条颜色
	ctx.stroke();
}

如图，我比较懒，里面用了循环画了几条曲线，一阵颜色一条，不同在于曲线的底端位置与曲线口径的不同。
你觉得像个什么呢？

这里并没有用到二次方形式的贝塞尔曲线，但是三次方的都会用了，二次方的还不行吗？

PS: 以上代码是主体部分，要运行上面的例子，请参考 进驻Canvas