canvas效果案例：贝塞尔曲线

绘制二次贝塞尔曲线

ctx.quadraticCurveTo(x1, y1, x, y);
从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(x1, y1)作为控制点

ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
// 起始点
ctx.moveTo(100, 400);//（从上一点）
ctx.quadraticCurveTo(200, 500, 300, 400);
ctx.stroke();

image.png

可以点击这使用网页版：二次贝塞尔曲线调试工具

绘制三次贝塞尔曲线

ctx.bezierCurveTo(x1, y1, x2, y2, x, y)
从上一个点开始绘制一条曲线，到(x, y)为止，并且以(x1, y1)和(x2, y2)为控制点

ctx.beginPath();
// 线的颜色， 线的粗细
ctx.strokeStyle = 'blue';
ctx.lineWidth = 4;
// 起始点
ctx.moveTo(100, 300);//（从上一点）
ctx.bezierCurveTo(150, 250, 250, 350, 300, 300);

ctx.stroke();

ctx.beginPath();
ctx.fillStyle = 'red';
ctx.font = '14px bold';
ctx.textAlign = 'center';

// 起始点
ctx.moveTo(100, 300);
ctx.fillText('(100, 300)', 100, 330);
ctx.arc(100, 300, 4, 0, 2 * Math.PI);

// 控制点1
ctx.moveTo(150, 250);
ctx.fillText('(150, 250)', 150, 230);
ctx.arc(150, 250, 4, 0, 2 * Math.PI);

// 控制点2
ctx.moveTo(250, 350);
ctx.fillText('(250, 350)', 250, 380);
ctx.arc(250, 350, 4, 0, 2 * Math.PI);

// 结束点
ctx.moveTo(300, 300);
ctx.fillText('(300, 300)', 300, 330);
ctx.arc(300, 300, 4, 0, 2 * Math.PI);

ctx.fill();

image.png

可以点击这使用网页版：三次贝塞尔曲线调试工具

这一章仅仅是简单的了解一下贝塞尔曲线的语法
如果你想更深入理解贝塞尔曲线，可以点击这里