Javascript -计算Kappa

Question

在HTML5中绘制椭圆曲线时，画布中没有内置的函数，您必须缩放，或者自己绘制，我已经看到了如下内容：

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .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(); // not used correctly, see comments (use to close off open path)
  ctx.stroke();
}

但“卡帕”是从哪里来的呢？你如何计算它，它是一个无穷多(小数)吗？

Answer 1

Kappa是这样计算的：

​

​

来源

然而，它永远不会产生一个数学上正确的椭圆。为此，您可以使用如下方法：

function drawEllipse(ctx, cx, cy, rx, ry) {

    var step = 0.01,                 // resolution of ellipse
        a = step,                    // counter
        pi2 = Math.PI * 2 - step;    // end angle

    /// set start point at angle 0
    ctx.moveTo(cx + rx, cy);
    for(; a < pi2; a += step) {
        ctx.lineTo(cx + rx * Math.cos(a), cy + ry * Math.sin(a));
    }
    ctx.closePath();
}

ellipse()的方法是实际上是规范的一部分，正如Loktar在评论中指出的那样，它在Chrome中是可用的，以后还会出现在其他浏览器中。

Answer 2

在微分几何中，曲线的曲率是用κ(kappa)表示的。

因此，kappa的值决定了椭圆的曲线，而.5522848可能只是开发人员在这段代码背后的选择。

根据这个表格(从维基百科)，正曲率决定椭圆：

​

​