贝塞尔曲线和椭圆的关系？

Question

我想在 html5 画布中画一个椭圆，我在stackoverflow 中找到了一个很好的方法。但我还有另一个问题。

function drawEllipse(ctx, x, y, w, h) {
  var kappa = 0.5522848;
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  ctx.closePath();
  ctx.stroke();
}

上面链接中的方法使用 bezierCurveTo 绘制椭圆，但它绘制了 bezierCurveTo 4次。但我认为只有2 bezierCurveTo 可以绘制一个椭圆。像这样：

但是我数学很差，谁能告诉我“控制点”和“椭圆点”的关系吗？或者我们必须画四个贝塞尔曲线才能画一个椭圆？

谢谢大家

Answer 1

我的背景不是数学，所以如果我错了，我相信有人会纠正我，但根据我的理解，我们可以用两条三次贝塞尔曲线绘制一个非常好的椭圆近似值，但坐标会有点棘手.

要回答有关椭圆点和控制点之间关系的问题，我认为最好通过从我选择的点观看此视频来回答（如果您熟悉插值）或从头开始（如果您不熟悉）。别担心它很短。

我们可能会遇到的一个问题是，当我们从顶部开始并以矩形的角（宽度和高度相同）作为控制点的椭圆的底部执行贝塞尔曲线到椭圆的底部时，椭圆的宽度为将小于矩形。.75 倍我们想要的大小。所以我们可以相应地缩放控制点。

我们的控制点的 x 将像这样调整（假设宽度是椭圆的宽度，我们除以 2 以获得它与原点的偏移量）

var cpx = (width / .75) / 2;

将可视化放在一起，您可以在其中使用宽度和高度并查看绘制的椭圆。

红色椭圆是我们想要的绘制方式，内部椭圆是如果我们不重新定位控制点，它将如何绘制。这些线条说明了视频中显示的 De Casteljau 算法。

这是可视化的屏幕截图