用二次贝塞尔曲线和三次贝塞尔曲线绘制椭圆

Question

我正在构建一个 JavaScript 模块来为 HTML5 画布元素添加便利功能。我试图提供尽可能多的不同实现来填写我的模块。要查看我的进度，请访问我的project page 和我的examples page。

我有一个使用三次贝塞尔曲线的椭圆绘制方法。我知道二次贝塞尔曲线可以转换为三次贝塞尔曲线，但我有一些问题：

• 逼近圆时的误差范围有什么不同吗？椭圆？
• 是否有任何理由同时使用这两种实现方式？ （性能、准确性等）
• 我是否缺少其他绘制椭圆的方法？

附：这没有直接关系，但是在这样的模块中是否还有其他功能会很好？

注意：这不是家庭作业。

编辑：这是我的椭圆代码（xDis 是 x 中的半径，yDis 是 y 中的半径）：

function ellipse(x, y, xDis, yDis) {
    var kappa = 0.5522848, // 4 * ((√(2) - 1) / 3)
        ox = xDis * kappa,  // control point offset horizontal
        oy = yDis * kappa,  // control point offset vertical
        xe = x + xDis,      // x-end
        ye = y + yDis;      // y-end

    this.moveTo(x - xDis, y);
    this.bezierCurveTo(x - xDis, y - oy, x - ox, y - yDis, x, y - yDis);
    this.bezierCurveTo(x + ox, y - yDis, xe, y - oy, xe, y);
    this.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
    this.bezierCurveTo(x - ox, ye, x - xDis, y + oy, x - xDis, y);
}

相关问题：

Convert a quadratic bezier to a cubic?

https://stackoverflow.com/questions/2688808/drawing-quadratic-bezier-circles-with-a-given-radius-how-to-determine-control-po

Answer 1

三次贝塞尔曲线比二次曲线多两个degrees of freedom。因此，它可以进一步减少错误。虽然选择控制点的数学越复杂，曲线的阶数越高，三次曲线应该就足够简单了。

性能上的差别不大。还有一些乘法和加法。

虽然这可以通过旋转平面来实现，但如果能够指定椭圆的轴就好了。一个中心和两个轴将形成椭圆center + cos(t)*axis1 + sin(t)*axis2。

该库的另一个功能可能是不同种类的多项式曲线和样条曲线。 B-spline 类似于贝塞尔曲线，但可以沿多个控制点继续。

Answer 2

如果它是一个普通椭圆，绘制椭圆的标准参数形式，如果它具有非规范方向，则将结果通过旋转变换不是更容易吗？