绘制二次贝塞尔曲线

1. 前言

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

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

2. 二次贝塞尔曲线

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

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

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

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

具体绘制方法为：

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

先看整体案例：

实例演示

预览复制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>xx网Wiki</title>
    <style> #imooc{ border:1px solid #ccc; } </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script> const canvas = document.getElementById('imooc'); canvas.width=300 canvas.height=300 const ctx = canvas.getContext('2d'); ctx.strokeStyle="#456795"; ctx.lineWidth=8; ctx.beginPath(); ctx.moveTo(40,40); ctx.quadraticCurveTo(260,150, 40,260); //调用了直接绘制椭圆的函数 ctx.stroke(); //绘制起点 ctx.beginPath(); ctx.arc(40,40,8,0,2*Math.PI) ctx.fillStyle= "#888" ctx.fill() //绘制控制点 ctx.beginPath(); ctx.arc(260,150,8,0,2*Math.PI) ctx.fillStyle= "#888" ctx.fill() //绘制终点 ctx.beginPath(); ctx.arc(40,260,8,0,2*Math.PI) ctx.fillStyle= "#888" ctx.fill() </script>
</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

运行结果：

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

3. 方法整理

本小节中我们使用到一个新的方法 quadraticCurveTo()。

3.1 quadraticCurveTo() 方法

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

变量说明：

变量名	类型	是否必须	说明
cpx	Number	是	控制点位置的X坐标。
cpy	Number	是	控制点位置的Y坐标。
x	Number	是	终点位置的X坐标。
y	Number	是	终点位置的Y坐标。

4. 总结

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