javascript - 如何绘制用三次贝塞尔曲线绘制的椭圆的一部分？

Question

我正在使用此函数在 HTML5 Canvas 中绘制一个椭圆（如何在 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();
  ctx.stroke();
}

然后，我得到所有这些值并将它们发送到我的 Android 应用程序。在那里，我正在使用 Path 类的cubicTo 方法绘制相同的椭圆。为此，我只使用上面函数的相同参数，它就像一个魅力。

但是现在，我只需要画出这个椭圆的一部分，而且我在谷歌上没有找到任何可以帮助我解决这个问题的东西。我想做的是，有这个第一个椭圆：

我希望能够绘制这些图像：

我怎么能做这种事情？

Answer 1

看看http://pomax.github.io/bezierinfo/#circles_cubic - 它讨论了圆弧的这个问题（以弧角表示的控制点值在该部分的底部），但它们之间的唯一区别椭圆是其中一个维度的旋转+缩放。如果您了解圆形近似，您也可以得到椭圆近似。

Answer 2

除了所有的数学东西，你可以简单地使用剪裁：

canvas.save();
canvas.clipRect(mYourTargetRect);
// draw your arc/circle/object/oval/whatever here
canvas.restore();

Answer 3

我有一个最简单的方法来做到这一点。我只是在我的 Web 应用程序中使用 Bezier 曲线绘制了一个椭圆。然后，我得到椭圆的 centerX、centerY、宽度和高度，并将它们传递给我的 android 应用程序。

在我的 Android 应用程序中，我可以使用 drawOval 方法在 Web 中绘制椭圆。有了这个，我可以使用 drawArcs 方法绘制椭圆的弧，该方法接收 Oval 作为参数。

Answer 4

Chrome 支持CanvasRenderingContext2D.prototype.ellipse绘制椭圆或椭圆弧的方法。但其他浏览器不支持椭圆方法。

您可以使用canvas-5-polyfill来提供 ellipse 方法。

或者只是写一些js代码：

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
    this.save();
    this.translate(x, y);
    this.rotate(rotation);
    this.scale(radiusX, radiusY);
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
    this.restore();
  }
}