Javascript - 计算 Kappa答案

【问题标题】：Javascript - Calculate KappaJavascript - 计算 Kappa
【发布时间】：2014-06-19 09:55:29
【问题描述】：

在 HTML5 中绘制椭圆曲线时，Canvas 没有内置功能，你必须缩放，或者自己制作，我见过这个：

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();
}

但是那个“kappa”是从哪里来的呢？怎么计算的，是无穷大吗（十进制）？

【问题讨论】：

只是在 chrome 中提醒一下，您现在可以使用 ellipse。 stackoverflow.com/questions/2172798/…
whizkidtech.redprince.net/bezier/circle/kappa
谢谢。做出回答，我会接受。你首先来到这里。
@Murplyx :) 我非常欣赏这一点，但不要出汗。接受其他人之一。

标签： javascript html math canvas

【解决方案1】：

在微分几何中，曲线的curvature 由 κ (kappa) 给出。

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

根据此表 (from wikipedia)，正曲率确定椭圆：

【讨论】：

【解决方案2】：

Kappa 是这样计算的：

Source

但是，它永远不会产生数学上正确的椭圆。为此，您可以使用这样的方法：

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() 方法是 actually a part of the specification，正如 Loktar 在 cmets 中指出的那样，它在 Chrome 中可用，稍后将在其他浏览器中使用。

【讨论】：