JavaScript 之 canvas（五）-- 椭圆、橡皮

原文地址： https://www.jeremyjone.com/490/， 转载请注明。

---

椭圆

通过前面的文章，我们已经可以绘制大部分图形以及文字。但是，在canvas中，椭圆是一个复杂的存在，本身我们上学时学习椭圆本身也是一个复杂的结构。我看了很多画椭圆的方案，大部分分为两类：

• 第一类是 使用arc()画一个圆形，然后将其缩放变形，完成一个椭圆。
• 第二类是 使用贝塞尔曲线，即使用多条贝塞尔曲线混合拼接为一个椭圆。

经过我的实际测试，采用我认为比较简单并且显示效果比较好的方式，使用贝塞尔曲线的方式绘制椭圆。

刚才说过，贝塞尔的方式是使用多条曲线拼接，一个椭圆可以是两条曲线、三条曲线，或四条甚至更多曲线拼接。我这里使用两条就够了，而且很大程度减少我们的计算量。

关于贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

在canvas中，使用bezierCurveTo()方法来绘制贝塞尔曲线，该方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

• 提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

** 以上摘自HTML5 canvas bezierCurveTo()方法说明

通过贝塞尔曲线绘制椭圆

通过上图，我们可以清楚看到绘制一条贝塞尔曲线的基本要素。

所以，我们的椭圆应该大致如下（纯鼠标绘制，别吐~ ~ ~）：

从图中可以看到，椭圆可以被分成两条贝塞尔曲线，我们只需要找到对应的点即可。计算过程忽略，直接看代码（代码已经经过位置计算的优化，看上去更像使用鼠标点击的起始点到结束点的椭圆）：

let k =