绘制贝塞尔曲线

Bezier Curve in Canvas

Bezier Curve in Canvas


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

在 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