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

Question

我想在html5 Canvas 上画一个椭圆，我在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绘制椭圆，但是绘制了bezierCurveTo4次。但我认为只需 2 bezierCurveTo 就可以绘制一个椭圆。像这样:

但是我数学不好，有人能告诉我“控制点”和“椭圆点”的关系吗？还是必须画4条贝塞尔曲线才能画出椭圆？

谢谢大家

Answer 1

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

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

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

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

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

Put together a visualization您可以在其中调整宽度和高度并查看绘制的椭圆。

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

这是可视化的屏幕截图