绘制二次贝塞尔曲线

Bézier curve（贝塞尔曲线）于1959年，由法国物理学家与数学家 Paul de Casteljau 所发明，于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，并用于汽车的车身设计。贝赛尔曲线为计算机矢量图形学奠定了基础，它的主要意义在于无论是直线或曲线都能在数学上予以描述。

贝塞尔曲线分为两种：二次贝塞尔曲线和三次贝塞尔曲线。本节我们主要介绍二次贝塞尔曲线。

二次贝塞尔曲线是一种二次曲线，它只能向方向弯曲，由三个点来定义：两个锚点及控制点，控制点用来控制曲线的形状。

我们先看一下二次贝塞尔曲线的绘制过程的：

二次贝塞尔曲线也可以用三个特征切线定义，曲线的第一部分与上下文点和控制点形成的虚线相切，曲线的顶部与 midpoint 1 和 midpoint 2 形成的虚线相切，曲线的最后部分与控制点和终点形成的虚线相切。如图所示：

在 canvas 中，绘制二次贝塞尔曲线和我们前面学过的 lineTo 类似，都需要在当前上下文中存在已有路径的终点作为贝塞尔曲线的起点，既然起点是已知的，那么只需知道控制点和终点，就能唯一确定一条二次贝塞尔曲线。

具体绘制为：

ctx.quadraticCurveTo(cpx,,x,y);

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		
		ctx.Style="#456795";
		ctx.lineWidth=;
		
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.quadraticCurveTo(,, ,);  //了直接绘制椭圆的
		ctx.();
		
		//绘制起点
		ctx.beginPath();
		ctx.arc(,,,,*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//绘制控制点
		ctx.beginPath();
		ctx.arc(,,,,*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
		
		//绘制终点
		ctx.beginPath();
		ctx.arc(,,,,*Math.PI)
		ctx.fillStyle= "#888"
		ctx.fill()
	</script>
</body>
</html>

运行结果：

这样我们就绘制了一条二次贝塞尔曲线。

本小节中我们使用到新的 quadraticCurveTo()。

quadraticCurveTo 作用是绘制一条二次贝塞尔曲线。

变量说明：

本小节我们主要学习了利用 quadraticCurveTo 绘制一条二次贝塞尔曲线，这个有四个参数，分别是控制点和终点的坐标。我们下一节开始学习三次贝塞尔曲线。

←绘制椭圆

绘制三次贝塞尔曲线→

绘制二次贝塞尔曲线

您的鼓励是对我最大的支持